Css 空心倒五边形
我试图制作一个中空(内部透明)的倒五边形,如下所示: 我尝试使用以下css来实现这一点:Css 空心倒五边形,css,linear-gradients,Css,Linear Gradients,我试图制作一个中空(内部透明)的倒五边形,如下所示: 我尝试使用以下css来实现这一点: .pentagon { border: solid 86px #E44126; border-bottom: none; width: 100%; height: 60%; position: absolute; } .pentagon:before { content: ""; position: absolute; top: 100%; right: 0px;
.pentagon {
border: solid 86px #E44126;
border-bottom: none;
width: 100%;
height: 60%;
position: absolute;
}
.pentagon:before {
content: "";
position: absolute;
top: 100%;
right: 0px;
width: 50%;
height: 100px;
background: -webkit-linear-gradient(to right bottom, transparent 50%, #E44126 50%,);
background: linear-gradient(to right bottom, transparent 50%, #E44126 50%);
}
.pentagon:after {
content: "";
position: absolute;
top: 100%;
left: 0px;
width: 50%;
height: 100px;
background: -webkit-linear-gradient(to right bottom, transparent 50%, #E44126 50%);
background: linear-gradient(to left bottom, transparent 50%, #E44126 50%);
}
但我能找到答案。我曾考虑过使用剪辑路径,但IE没有浏览器支持。这里尝试一下,但改用旋转。可以调整宽度/高度/边框大小的值 HTML:
请提供您的html或小提琴。这是我的html:
* {
box-sizing: border-box;
}
.container {
width: 100px;
height: 100px;
position: relative;
}
.pentagon {
border: solid 5px #E44126;
border-bottom: none;
width: 100%;
height: 50%;
}
.pentagon:before {
content: '';
display: inline-block;
width: 65%;
height: 65%;
border: 5px solid #E44126;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
transform: rotate(45deg);
border-top: 0;
border-left: 0;
}
<div class="container"><div class="pentagon"></div></div>