:root {
|
/* 边框宽度 */
|
--border-width: 2px;
|
/* 折角直角边长度, 小型 */
|
--bevel-length: 10px;
|
/* 折角直角边长度，大型 */
|
--bevel-length-2: 40px;
|
/* 画5边形时，折角的内圈顶点的偏移量，根据边框宽度变化 */
|
/* --border-offest: 1.24px; */
|
--border-offest: 0.98px;
|
|
|
/* 画三角边框内圈顶点的额外便宜量 */
|
/* --border-offest-2: 3.94px; */
|
--border-offest-2: 2.63px;
|
|
--border-offest-3: 4.4px;
|
|
--font-color: #ffffffc0;
|
--border-color: #cac8c8ef;
|
--bg-color: #122b54a9;
|
--bg-color-2: #122b54e3;
|
/* --select_color: #7dff5d96; */
|
--select_color: #23dad0a2;
|
/* --select_color: #23dad1; */
|
|
|
/* --font-color: #221f1fc0;
|
--border-color: #e5f58eef;
|
--bg-color: #64899ea9;
|
--bg-color-2: #34A997;
|
--select_color: #F2EEA7a2; */
|
}
|
|
|
|
|
|
|
/***************** 边框基本属性 - start ******************/
|
/* 边框 */
|
.ff-border-bottom {
|
width: 100%;
|
height: 100%;
|
background-color: var(--border-color);
|
/* z-index: 1000px; */
|
}
|
|
/* 背景 */
|
.ff-border-top {
|
position: relative;
|
color: var(--font-color);
|
background-color: var(--bg-color);
|
/* z-index: 1000; */
|
}
|
|
.ff-border-top img.ff-img {
|
width: 16px;
|
height: 16px;
|
/* margin-bottom: 6px; */
|
}
|
|
/* 三角样式 */
|
.ff-triangle {
|
position: absolute;
|
width: calc(var(--bevel-length-2) - var(--border-width));
|
height: calc(var(--bevel-length-2) - var(--border-width));
|
}
|
|
/* 三角边框 */
|
.ff-triangle-border {
|
width: 100%;
|
height: 100%;
|
background-color: var(--border-color);
|
|
position: absolute;
|
-webkit-clip-path:
|
polygon(0 0, 0 calc(100% - var(--border-width) - 1px), var(--border-width) calc(100% - var(--border-width) - 1px),
|
var(--border-width) calc(var(--border-width) + var(--border-offest-2)), calc(100% - var(--border-width) - var(--border-offest-2)) calc(100% - var(--border-width)),
|
var(--border-width) calc(100% - var(--border-width)),
|
var(--border-width) calc(100% - var(--border-width) - 1px), 0 calc(100% - var(--border-width) - 1px),
|
0 100%, 100% 100%);
|
clip-path:
|
polygon(0 0, 0 calc(100% - var(--border-width) - 1px), var(--border-width) calc(100% - var(--border-width) - 1px),
|
var(--border-width) calc(var(--border-width) + var(--border-offest-2)), calc(100% - var(--border-width) - var(--border-offest-2)) calc(100% - var(--border-width)),
|
var(--border-width) calc(100% - var(--border-width)),
|
var(--border-width) calc(100% - var(--border-width) - 1px), 0 calc(100% - var(--border-width) - 1px),
|
0 100%, 100% 100%);
|
/* bottom: 0px;
|
left: 0px; */
|
|
/* border-color: #122b54 transparent; */
|
/* border-width: 0px 56px 56px 0px; */
|
/* border-style: solid; */
|
}
|
|
/* 底部空余区域 */
|
.ff-footer {
|
position: absolute;
|
color: var(--font-color);
|
width: calc(100% - var(--border-width) * 2);
|
/* min-height: calc((var(--bevel-length-2) - var(--border-width)) * 1); */
|
/* background-color: brown; */
|
z-index: 10;
|
}
|
|
/*****************边框基本属性 - end **************************/
|
|
|
|
|
|
|
|
/***************** 内容区域样式 - start ******************/
|
/* 标题样式 */
|
.ff-title .ff-border-bottom {
|
position: absolute;
|
-webkit-clip-path:
|
polygon(0 0,
|
calc(100% - var(--border-width) - var(--border-offest-3)) 0%,
|
calc(100% - var(--border-width) - var(--border-offest-3)) var(--border-width),
|
calc(var(--border-width) + var(--border-offest-3)) var(--border-width),
|
calc(6% + var(--border-width)) calc(100% - var(--border-width)),
|
calc(8% - var(--border-width)) calc(100% - var(--border-width)),
|
calc(9% - var(--border-width)) calc(84% - var(--border-width)),
|
calc(91% + var(--border-width)) calc(84% - var(--border-width)),
|
calc(92% + var(--border-width)) calc(100% - var(--border-width)),
|
calc(94% - var(--border-width)) calc(100% - var(--border-width)),
|
calc(100% - var(--border-width) - var(--border-offest-3)) var(--border-width),
|
calc(100% - var(--border-width) - var(--border-offest-3)) 0,
|
100% 0,
|
94% 100%,
|
92% 100%,
|
91% 84%,
|
9% 84%,
|
8% 100%,
|
6% 100%);
|
clip-path:
|
polygon(0 0,
|
calc(100% - var(--border-width) - var(--border-offest-3)) 0%,
|
calc(100% - var(--border-width) - var(--border-offest-3)) var(--border-width),
|
calc(var(--border-width) + var(--border-offest-3)) var(--border-width),
|
calc(6% + var(--border-width)) calc(100% - var(--border-width)),
|
calc(8% - var(--border-width)) calc(100% - var(--border-width)),
|
calc(9% - var(--border-width)) calc(84% - var(--border-width)),
|
calc(91% + var(--border-width)) calc(84% - var(--border-width)),
|
calc(92% + var(--border-width)) calc(100% - var(--border-width)),
|
calc(94% - var(--border-width)) calc(100% - var(--border-width)),
|
calc(100% - var(--border-width) - var(--border-offest-3)) var(--border-width),
|
calc(100% - var(--border-width) - var(--border-offest-3)) 0,
|
100% 0,
|
94% 100%,
|
92% 100%,
|
91% 84%,
|
9% 84%,
|
8% 100%,
|
6% 100%);
|
}
|
|
.ff-title .ff-border-top {
|
padding: 8px 8px 12px 8px;
|
-webkit-clip-path: polygon(calc(var(--border-offest-3) + var(--border-width)) var(--border-width),
|
calc(100% - var(--border-width) - var(--border-offest-3)) var(--border-width),
|
calc(94% - var(--border-width)) calc(100% - var(--border-width)),
|
calc(92% + var(--border-width)) calc(100% - var(--border-width)),
|
calc(91% + var(--border-width)) calc(84% - var(--border-width)),
|
calc(9% - var(--border-width)) calc(84% - var(--border-width)),
|
calc(8% - var(--border-width)) calc(100% - var(--border-width)),
|
calc(6% + var(--border-width)) calc(100% - var(--border-width)));
|
clip-path: polygon(calc(var(--border-offest-3) + var(--border-width)) var(--border-width),
|
calc(100% - var(--border-width) - var(--border-offest-3)) var(--border-width),
|
calc(94% - var(--border-width)) calc(100% - var(--border-width)),
|
calc(92% + var(--border-width)) calc(100% - var(--border-width)),
|
calc(91% + var(--border-width)) calc(84% - var(--border-width)),
|
calc(9% - var(--border-width)) calc(84% - var(--border-width)),
|
calc(8% - var(--border-width)) calc(100% - var(--border-width)),
|
calc(6% + var(--border-width)) calc(100% - var(--border-width)));
|
}
|
|
/* 中等大小单侧内容 (默认右侧，左下角为折角样式)*/
|
.ff-content-medium .ff-border-bottom {
|
position: absolute;
|
-webkit-clip-path:
|
polygon(0 0,
|
calc(100% - 10px) 0%,
|
calc(100% - 10px) var(--border-width),
|
var(--border-width) var(--border-width),
|
var(--border-width) calc(100% - var(--bevel-length-2) - var(--border-offest)),
|
calc(var(--bevel-length-2) + var(--border-offest)) calc(100% - var(--border-width)),
|
calc(100% - var(--border-width)) calc(100% - var(--border-width)),
|
calc(100% - var(--border-width)) var(--border-width),
|
calc(100% - 10px) var(--border-width),
|
calc(100% - 10px) 0%,
|
100% 0%,
|
100% 100%,
|
var(--bevel-length-2) 100%,
|
0 calc(100% - var(--bevel-length-2)));
|
clip-path:
|
polygon(0 0,
|
calc(100% - 10px) 0%,
|
calc(100% - 10px) var(--border-width),
|
var(--border-width) var(--border-width),
|
var(--border-width) calc(100% - var(--bevel-length-2) - var(--border-offest)),
|
calc(var(--bevel-length-2) + var(--border-offest)) calc(100% - var(--border-width)),
|
calc(100% - var(--border-width)) calc(100% - var(--border-width)),
|
calc(100% - var(--border-width)) var(--border-width),
|
calc(100% - 10px) var(--border-width),
|
calc(100% - 10px) 0%,
|
100% 0%,
|
100% 100%,
|
var(--bevel-length-2) 100%,
|
0 calc(100% - var(--bevel-length-2)));
|
}
|
|
.ff-content-medium .ff-border-top {
|
padding: 8px 8px var(--bevel-length-2) 8px;
|
/* padding: 0px 0px var(--bevel-length-2) 0px; */
|
-webkit-clip-path:
|
polygon(var(--border-width) var(--border-width),
|
calc(100% - var(--border-width)) var(--border-width),
|
calc(100% - var(--border-width)) calc(100% - var(--border-width)),
|
calc(var(--bevel-length-2) + var(--border-offest)) calc(100% - var(--border-width)),
|
var(--border-width) calc(100% - var(--bevel-length-2) - var(--border-offest)));
|
clip-path:
|
polygon(var(--border-width) var(--border-width),
|
calc(100% - var(--border-width)) var(--border-width),
|
calc(100% - var(--border-width)) calc(100% - var(--border-width)),
|
calc(var(--bevel-length-2) + var(--border-offest)) calc(100% - var(--border-width)),
|
var(--border-width) calc(100% - var(--bevel-length-2) - var(--border-offest)));
|
}
|
|
/* 小型单侧内容 (默认右侧，左下角为折角样式)*/
|
.ff-content-small .ff-border-bottom {
|
position: absolute;
|
-webkit-clip-path:
|
polygon(0 0,
|
calc(100% - 10px) 0%,
|
calc(100% - 10px) var(--border-width),
|
var(--border-width) var(--border-width),
|
var(--border-width) calc(100% - var(--bevel-length) - var(--border-offest)),
|
calc(var(--bevel-length) + var(--border-offest)) calc(100% - var(--border-width)),
|
calc(100% - var(--border-width)) calc(100% - var(--border-width)),
|
calc(100% - var(--border-width)) var(--border-width),
|
calc(100% - 10px) var(--border-width),
|
calc(100% - 10px) 0%,
|
100% 0%,
|
100% 100%,
|
var(--bevel-length) 100%,
|
0 calc(100% - var(--bevel-length)));
|
clip-path:
|
polygon(0 0,
|
calc(100% - 10px) 0%,
|
calc(100% - 10px) var(--border-width),
|
var(--border-width) var(--border-width),
|
var(--border-width) calc(100% - var(--bevel-length) - var(--border-offest)),
|
calc(var(--bevel-length) + var(--border-offest)) calc(100% - var(--border-width)),
|
calc(100% - var(--border-width)) calc(100% - var(--border-width)),
|
calc(100% - var(--border-width)) var(--border-width),
|
calc(100% - 10px) var(--border-width),
|
calc(100% - 10px) 0%,
|
100% 0%,
|
100% 100%,
|
var(--bevel-length) 100%,
|
0 calc(100% - var(--bevel-length)));
|
}
|
|
.ff-content-small .ff-border-top {
|
padding: 6px 8px 6px 8px;
|
-webkit-clip-path:
|
polygon(var(--border-width) var(--border-width),
|
calc(100% - var(--border-width)) var(--border-width),
|
calc(100% - var(--border-width)) calc(100% - var(--border-width)),
|
calc(var(--bevel-length) + var(--border-offest)) calc(100% - var(--border-width)),
|
var(--border-width) calc(100% - var(--bevel-length) - var(--border-offest)));
|
clip-path:
|
polygon(var(--border-width) var(--border-width),
|
calc(100% - var(--border-width)) var(--border-width),
|
calc(100% - var(--border-width)) calc(100% - var(--border-width)),
|
calc(var(--bevel-length) + var(--border-offest)) calc(100% - var(--border-width)),
|
var(--border-width) calc(100% - var(--bevel-length) - var(--border-offest)));
|
}
|
|
/* 小型单侧内容 (右侧无边框)*/
|
.ff-content-small-borderless-r .ff-border-bottom {
|
position: absolute;
|
-webkit-clip-path:
|
polygon(0 0,
|
calc(100%) 0%,
|
calc(100%) var(--border-width),
|
var(--border-width) var(--border-width),
|
var(--border-width) calc(100% - var(--bevel-length) - var(--border-offest)),
|
calc(var(--bevel-length) + var(--border-offest)) calc(100% - var(--border-width)),
|
calc(100%) calc(100% - var(--border-width)),
|
100% 100%,
|
var(--bevel-length) 100%,
|
0 calc(100% - var(--bevel-length)));
|
clip-path:
|
polygon(0 0,
|
calc(100%) 0%,
|
calc(100%) var(--border-width),
|
var(--border-width) var(--border-width),
|
var(--border-width) calc(100% - var(--bevel-length) - var(--border-offest)),
|
calc(var(--bevel-length) + var(--border-offest)) calc(100% - var(--border-width)),
|
calc(100%) calc(100% - var(--border-width)),
|
100% 100%,
|
var(--bevel-length) 100%,
|
0 calc(100% - var(--bevel-length)));
|
}
|
|
.ff-content-small-borderless-r .ff-border-top {
|
padding: 6px 8px 6px 8px;
|
-webkit-clip-path:
|
polygon(var(--border-width) var(--border-width),
|
calc(100%) var(--border-width),
|
calc(100%) calc(100% - var(--border-width)),
|
calc(var(--bevel-length) + var(--border-offest)) calc(100% - var(--border-width)),
|
var(--border-width) calc(100% - var(--bevel-length) - var(--border-offest)));
|
clip-path:
|
polygon(var(--border-width) var(--border-width),
|
calc(100%) var(--border-width),
|
calc(100%) calc(100% - var(--border-width)),
|
calc(var(--bevel-length) + var(--border-offest)) calc(100% - var(--border-width)),
|
var(--border-width) calc(100% - var(--bevel-length) - var(--border-offest)));
|
}
|
|
/* 小型单侧内容 (顶部无边框)*/
|
.ff-content-small-borderless-t .ff-border-bottom {
|
position: absolute;
|
-webkit-clip-path:
|
polygon(0 0,
|
var(--border-width) 0,
|
var(--border-width) calc(100% - var(--bevel-length) - var(--border-offest)),
|
calc(var(--bevel-length) + var(--border-offest)) calc(100% - var(--border-width)),
|
calc(100% - var(--border-width)) calc(100% - var(--border-width)),
|
calc(100% - var(--border-width)) 0,
|
100% 0,
|
100% 100%,
|
var(--bevel-length) 100%,
|
0 calc(100% - var(--bevel-length)));
|
clip-path:
|
polygon(0 0,
|
var(--border-width) 0,
|
var(--border-width) calc(100% - var(--bevel-length) - var(--border-offest)),
|
calc(var(--bevel-length) + var(--border-offest)) calc(100% - var(--border-width)),
|
calc(100% - var(--border-width)) calc(100% - var(--border-width)),
|
calc(100% - var(--border-width)) 0,
|
100% 0,
|
100% 100%,
|
var(--bevel-length) 100%,
|
0 calc(100% - var(--bevel-length)));
|
}
|
|
.ff-content-small-borderless-t .ff-border-top {
|
padding: 6px 8px 6px 8px;
|
-webkit-clip-path:
|
polygon(var(--border-width) 0,
|
calc(100% - var(--border-width)) 0,
|
calc(100% - var(--border-width)) calc(100% - var(--border-width)),
|
calc(var(--bevel-length) + var(--border-offest)) calc(100% - var(--border-width)),
|
var(--border-width) calc(100% - var(--bevel-length) - var(--border-offest)));
|
clip-path:
|
polygon(var(--border-width) 0,
|
calc(100% - var(--border-width)) 0,
|
calc(100% - var(--border-width)) calc(100% - var(--border-width)),
|
calc(var(--bevel-length) + var(--border-offest)) calc(100% - var(--border-width)),
|
var(--border-width) calc(100% - var(--bevel-length) - var(--border-offest)));
|
}
|
|
/* 内容 */
|
.ff-content {
|
position: relative;
|
display: block;
|
}
|
|
/* .ff-content .ff-border-top {
|
padding: 8px 8px var(--bevel-length-2) 8px;
|
} */
|
|
/********************* 居中内容 - start *******************/
|
.ff-content-middle-s .ff-border-bottom {
|
position: absolute;
|
-webkit-clip-path:
|
polygon(0 0,
|
calc(100% - 10px) 0%,
|
calc(100% - 10px) var(--border-width),
|
var(--border-width) var(--border-width),
|
var(--border-width) calc(100% - var(--bevel-length) - var(--border-offest)),
|
calc(var(--bevel-length) + var(--border-offest)) calc(100% - var(--border-width)),
|
calc(100% - var(--bevel-length) - var(--border-offest)) calc(100% - var(--border-width)),
|
calc(100% - var(--border-width)) calc(100% - var(--bevel-length) - var(--border-offest)),
|
calc(100% - var(--border-width)) var(--border-width),
|
calc(100% - 10px) var(--border-width),
|
calc(100% - 10px) 0%,
|
100% 0%,
|
100% calc(100% - var(--bevel-length)),
|
calc(100% - var(--bevel-length)) calc(100%),
|
var(--bevel-length) 100%,
|
0 calc(100% - var(--bevel-length)));
|
clip-path:
|
polygon(0 0,
|
calc(100% - 10px) 0%,
|
calc(100% - 10px) var(--border-width),
|
var(--border-width) var(--border-width),
|
var(--border-width) calc(100% - var(--bevel-length) - var(--border-offest)),
|
calc(var(--bevel-length) + var(--border-offest)) calc(100% - var(--border-width)),
|
calc(100% - var(--bevel-length) - var(--border-offest)) calc(100% - var(--border-width)),
|
calc(100% - var(--border-width)) calc(100% - var(--bevel-length) - var(--border-offest)),
|
calc(100% - var(--border-width)) var(--border-width),
|
calc(100% - 10px) var(--border-width),
|
calc(100% - 10px) 0%,
|
100% 0%,
|
100% calc(100% - var(--bevel-length)),
|
calc(100% - var(--bevel-length)) calc(100%),
|
var(--bevel-length) 100%,
|
0 calc(100% - var(--bevel-length)));
|
}
|
|
.ff-content-middle-s .ff-border-top {
|
padding: 4px 8px;
|
-webkit-clip-path:
|
polygon(var(--border-width) var(--border-width),
|
calc(100% - var(--border-width)) var(--border-width),
|
calc(100% - var(--border-width)) calc(100% - var(--bevel-length) - var(--border-offest)),
|
calc(100% - var(--bevel-length) - var(--border-offest)) calc(100% - var(--border-width)),
|
calc(var(--bevel-length) + var(--border-offest)) calc(100% - var(--border-width)),
|
var(--border-width) calc(100% - var(--bevel-length) - var(--border-offest)));
|
clip-path:
|
polygon(var(--border-width) var(--border-width),
|
calc(100% - var(--border-width)) var(--border-width),
|
calc(100% - var(--border-width)) calc(100% - var(--bevel-length) - var(--border-offest)),
|
calc(100% - var(--bevel-length) - var(--border-offest)) calc(100% - var(--border-width)),
|
calc(var(--bevel-length) + var(--border-offest)) calc(100% - var(--border-width)),
|
var(--border-width) calc(100% - var(--bevel-length) - var(--border-offest)));
|
}
|
|
/* 居中内容 - 上 */
|
.ff-content-up .ff-border-bottom {
|
transform: none;
|
}
|
|
.ff-content-up .ff-border-top {
|
transform: none;
|
}
|
|
/* 居中内容 - 下 */
|
.ff-content-down .ff-border-bottom {
|
transform: rotateX(180deg);
|
}
|
|
.ff-content-down .ff-border-top {
|
transform: rotateX(180deg);
|
}
|
|
.ff-content-down .ff-border-top .ff-border-content {
|
transform: rotateX(180deg);
|
}
|
|
/********************* 居中内容 - end *******************/
|
|
/* 右侧内容 */
|
.ff-content-right .ff-border-bottom {
|
transform: none;
|
}
|
|
.ff-content-right .ff-border-top {
|
transform: none;
|
}
|
|
.ff-content-right .ff-triangle {
|
bottom: 0px;
|
left: 0px;
|
}
|
|
.ff-content-right .ff-triangle-border {
|
transform: none;
|
}
|
|
.ff-content-right .ff-footer {
|
bottom: var(--border-width);
|
right: var(--border-width);
|
padding-left: var(--bevel-length-2);
|
padding-right: 4px;
|
}
|
|
/* 左侧内容 */
|
.ff-content-left .ff-border-bottom {
|
transform: rotateY(180deg);
|
}
|
|
.ff-content-left .ff-border-top {
|
transform: rotateY(180deg);
|
}
|
|
.ff-content-left .ff-border-top .ff-border-content {
|
transform: rotateY(180deg);
|
}
|
|
.ff-content-left .ff-triangle {
|
bottom: 0px;
|
right: 0px;
|
}
|
|
.ff-content-left .ff-triangle-border {
|
transform: rotateY(180deg);
|
}
|
|
.ff-content-left .ff-footer {
|
bottom: var(--border-width);
|
left: var(--border-width);
|
padding-right: var(--bevel-length-2);
|
padding-left: 4px;
|
}
|
|
/* 左上侧内容 */
|
.ff-content-top-left .ff-border-bottom {
|
transform: rotateX(180deg);
|
}
|
|
.ff-content-top-left .ff-border-top {
|
transform: rotateX(180deg);
|
}
|
|
.ff-content-top-left .ff-border-top .ff-border-content {
|
transform: rotateX(180deg);
|
}
|
|
.ff-content-top-left .ff-triangle {
|
top: 0px;
|
left: 0px;
|
}
|
|
.ff-content-top-left .ff-triangle-border {
|
transform: rotateY(180deg);
|
transform: rotateX(180deg);
|
}
|
|
/* 右上侧内容 */
|
.ff-content-top-right .ff-border-bottom {
|
transform: rotateZ(180deg);
|
}
|
|
.ff-content-top-right .ff-border-top {
|
transform: rotateZ(180deg);
|
}
|
|
.ff-content-top-right .ff-border-top .ff-border-content {
|
transform: rotateZ(180deg);
|
}
|
|
.ff-content-top-right .ff-triangle {
|
top: 0px;
|
right: 0px;
|
}
|
|
.ff-content-top-left .ff-triangle-border {
|
transform: rotateZ(180deg);
|
}
|
|
/******************内容区域样式 - end *************************/
|
|
|
|
|
|
|
/***************** 按钮区域样式 - start ******************/
|
/* 按钮 */
|
.ff-toggle-btn {
|
position: relative;
|
|
}
|
|
.ff-toggle-btn .ff-border-top {
|
padding: 6px 6px 16px 6px;
|
font-size: 16px;
|
line-height: 16px;
|
cursor: pointer;
|
}
|
|
.ff-toggle-btn .ff-border-top:hover {
|
/* color: antiquewhite; */
|
background-color: #115e5a5d;
|
}
|
|
/* 中等大小按钮(左侧按钮) */
|
.ff-btn-medium .ff-border-bottom {
|
position: absolute;
|
-webkit-clip-path:
|
polygon(0 0,
|
calc(100%) 0%,
|
calc(100%) var(--border-width),
|
var(--border-width) var(--border-width),
|
var(--border-width) calc(100% - var(--bevel-length) - var(--border-offest)),
|
calc(var(--bevel-length) + var(--border-offest)) calc(100% - var(--border-width)),
|
calc(100%) calc(100% - var(--border-width)),
|
calc(100%) 100%,
|
100% 100%,
|
var(--bevel-length) 100%,
|
0 calc(100% - var(--bevel-length)));
|
clip-path:
|
polygon(0 0,
|
calc(100%) 0%,
|
calc(100%) var(--border-width),
|
var(--border-width) var(--border-width),
|
var(--border-width) calc(100% - var(--bevel-length) - var(--border-offest)),
|
calc(var(--bevel-length) + var(--border-offest)) calc(100% - var(--border-width)),
|
calc(100%) calc(100% - var(--border-width)),
|
calc(100%) 100%,
|
100% 100%,
|
var(--bevel-length) 100%,
|
0 calc(100% - var(--bevel-length)));
|
}
|
|
.ff-btn-medium .ff-border-top {
|
-webkit-clip-path:
|
polygon(var(--border-width) var(--border-width),
|
calc(100%) var(--border-width),
|
calc(100%) calc(100% - var(--border-width)),
|
calc(var(--bevel-length) + var(--border-offest)) calc(100% - var(--border-width)),
|
var(--border-width) calc(100% - var(--bevel-length) - var(--border-offest)));
|
clip-path:
|
polygon(var(--border-width) var(--border-width),
|
calc(100%) var(--border-width),
|
calc(100%) calc(100% - var(--border-width)),
|
calc(var(--bevel-length) + var(--border-offest)) calc(100% - var(--border-width)),
|
var(--border-width) calc(100% - var(--bevel-length) - var(--border-offest)));
|
}
|
|
/* 左侧按钮 */
|
.ff-toggle-btn-left .ff-border-bottom {
|
transform: none;
|
}
|
|
.ff-toggle-btn-left .ff-border-top {
|
transform: none;
|
}
|
|
/* 右侧按钮 */
|
.ff-toggle-btn-right .ff-border-bottom {
|
transform: rotateY(180deg);
|
}
|
|
.ff-toggle-btn-right .ff-border-top {
|
transform: rotateY(180deg);
|
}
|
|
.ff-toggle-btn-right .ff-border-top .ff-border-content {
|
transform: rotateY(180deg);
|
}
|
|
/* 下方按钮 */
|
.ff-toggle-btn-down .ff-border-bottom {
|
transform: rotateZ(-90deg);
|
}
|
|
.ff-toggle-btn-down .ff-border-top {
|
transform: rotateZ(-90deg);
|
}
|
|
.ff-toggle-btn-down .ff-border-top .ff-border-content {
|
transform: rotateZ(90deg);
|
}
|
|
/*****************按钮区域样式 - end *************************/
|
