Jorge Jorge - 3 months ago 9
CSS Question

How to achieve edgy bottom of div like this image below

see image

Want to achieve this without using image slicing technique. Is it possible using css?

image here

Answer

i will give you a starting point. it's not exactly as your image...but just to see in general how it could be done :

.shapeme {
	width: 0;
	height: 0;
	border-left: 100px solid transparent;
	border-right: 100px solid transparent;
	border-top: 50px solid red;
  position:relative;
  margin-top:40px;
  
}
.shapeme:after{

    content:"";
    width: 0; 
    height: 0; 
    border-left: 100px solid transparent;
	border-right: 100px solid transparent;
	border-top: 40px solid grey; 
    position:absolute;
    top:-50px;
    left:-100px;

}
.shapeme:before{
  content:"";
  background:grey;
  position:absolute;
  top:-90px;
  height:40px;
  width:200px;
  left:-100px;
}
<div class="shapeme">

</div>