我可以在CSS中创建一个普通的方形div和一个三角形div。但我不知道如何用一个div来制作这样的形状。任何人都可以帮助我吗?
此外,我希望将其扩展到其父级的整个宽度,但border
属性不支持百分比。 (例如border-left: 160px solid transparent;
)
.container{
width: 100%;
position: relative;
}
.v-div {
width: 0;
height: 0;
border-left: 160px solid transparent;
border-right: 160px solid transparent;
border-top: 100px solid #f00;
}
.box{
height: 80px;
width: 320px;
background: red;
}

<div class="container">
<div class="box">
</div>
<div class="v-div">
</div>
</div>
&#13;
答案 0 :(得分:6)
你可以用:after
伪类来做。如果您在此示例中取消注释:before
,则会获得六边形
#hexagon{
position: relative;
height:100px;
width:50%;
color: white;
background: green;
padding-bottom: 15%;
overflow:hidden;
background-clip: content-box;
}
#hexagon:after {
content: "";
position: absolute;
top:100px;
left: 0;
background-color:green;
padding-bottom: 50%;
width: 57.7%;
transform-origin: 0 0;
transform: rotate(-30deg) skewX(30deg);
}
<div id="hexagon"></div>
答案 1 :(得分:3)
您可以使用剪辑路径css属性
#clippedDiv{
width:200px;
height:200px;
background-color:red;
-webkit-clip-path: polygon(50% 0%, 100% 0, 100% 35%, 50% 70%, 0 35%, 0 0);
clip-path: polygon(50% 0%, 100% 0, 100% 35%, 50% 70%, 0 35%, 0
}
&#13;
<div id="clippedDiv"></div>
&#13;
如需更多形状,您可以访问http://bennettfeely.com/clippy/
答案 2 :(得分:2)
使用:在css选择器之后。
.container{
width: 100%;
position: relative;
margin-top: 100px;
}
.box {
width: 100px;
height: 55px;
background: red;
position: relative;
}
.box:after {
content: "";
position: absolute;
bottom: -25px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 25px solid red;
}
&#13;
<div class="container">
<div class="box">
</div>
</div>
&#13;
答案 3 :(得分:0)
<svg width="12cm" height="4cm" viewBox="0 0 1200 400"
xmlns="http://www.w3.org/2000/svg" version="1.1"><polygon fill="lime" stroke="blue" stroke-width="10" points="850,75 958,137.5 958,262.5 850,325 742,262.6 742,137.5" /></svg>