Daniel Daniel - 2 months ago 17
CSS Question

CSS: How to create special shape

enter image description here

I would like to create a div as shown above.

I tried to reach my goal like this, but I do not know how to lift the border bottom.



#myForm {
border-bottom: 100px solid green;
border-right: 70px solid transparent;
height: 0;
width: 150px;
}

<div id="myForm"></div>




Answer

Use CSS ::before and ::after pseudo-elements:

html{
  background-color: #fff;
}

div{
  width: 300px;
  height: 100px;
  position: relative;
  background-color: red;
}

div::before, div::after{
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
}

div::before{
  bottom: 0;
  border-width: 0 0 50px 300px;
  border-color: transparent transparent #fff transparent;
}

div::after{
  right: 0;
  border-width: 0 20px 100px 0;
  border-color: transparent #fff transparent transparent;
}
<div></div>

JSFiddle

Comments