I am able to make a normal square div and a triangle div in CSS. But I don't know how to make such a shape with a single div. Can anyone help me out ?
Also I want this to spread to the entire width of it's parent but border
properties don't support percentages. ( eg 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>
you can use clip path css property
#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
}
<div id="clippedDiv"></div>
for more shapes you can visit http://bennettfeely.com/clippy/
you can do it with :after
pseudo classes. If you uncomment the :before
in this example you get a hexagon
#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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With