Daniel Daniel - 1 year ago 88
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 Source

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

  background-color: #fff;

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

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

  bottom: 0;
  border-width: 0 0 50px 300px;
  border-color: transparent transparent #fff transparent;

  right: 0;
  border-width: 0 20px 100px 0;
  border-color: transparent #fff transparent transparent;