大家好
我无法为这个使用CSS创建的八角形设置透明背景。
#octagon {
width: 100px;
height: 100px;
background: red;
position: relative;
}
#octagon:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 42px;
height: 0;
border-left: 29px solid transparent;
border-right: 29px solid transparent;
border-bottom: 29px solid red;
}
#octagon:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 42px;
height: 0;
border-left: 29px solid transparent;
border-right: 29px solid transparent;
border-top: 29px solid red;
}
有什么办法可以让它工作吗?
提前感谢,亚历克斯
使用背景色代替透明。
例如,如果你的背景色是白色,使用#fff。
#octagon {
width: 100px;
height: 100px;
background: red;
position: relative;
}
#octagon:before {
content: "";
position: absolute;
top: 0;
left: 0;
border-bottom: 29px solid red;
border-left: 29px solid #fff;/* <--- */
border-right: 29px solid #fff;/* <--- */
width: 42px;
height: 0;
}
#octagon:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
border-top: 29px solid red;
border-left: 29px solid #fff;/* <--- */
border-right: 29px solid #fff; /* <--- */
width: 42px;
height: 0;
}
小提琴
或者,您可以使用transforms
创建一个八边形
#octagon {
height: 100px;
overflow: hidden;
position: absolute;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
width: 100px;
}
#octagon:after {
background: red;
bottom: 0;
content: '';
left: 0;
position: absolute;
right: 0;
top: 0;
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
小提琴