CODEWITHSUNDEEP
htmlcss
mrid
mrid

Reputation: 5794

How to make a polygon div in CSS

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>

Upvotes: 9

Views: 23777

Answers (3)

Mahmudur Rahman
Mahmudur Rahman

Reputation: 765

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 0);
}
<div id="clippedDiv"></div>

for more shapes you can visit http://bennettfeely.com/clippy/

Upvotes: 9

ab29007
ab29007

Reputation: 7766

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>

Upvotes: 7

priya_singh
priya_singh

Reputation: 2488

use :after css selector.

.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;
}
				
<div class="container">
    <div class="box">
    </div>
</div>

Upvotes: 2

Related Questions