Rohitesh Rohitesh - 3 years ago 154
CSS Question

Create a div with triangle cut on the left side middle

I want to design a div which look like :

enter image description here

I tried to find out on the web but i could not able to find this kind of design.

Dotted line is not required as it came there white taking the screenshot.

Answer Source

.sample{
  height: 200px;
  width: 200px;
  background: red;
  position: relative;
}

.sample::after{
  width: 0;
height: 0;
border-style: solid;
border-width: 25px 0 25px 50px;
border-color: transparent transparent transparent #FFF;
display: block;
  content:"";
  position: absolute;
  top: 10px;
}
<div class="sample"> </div> 

.sample{
  height: 200px;
  width: 200px;
  background: red;
  position: relative;
}

.sample::after{
  width: 0;
height: 0;
border-style: solid;
border-width: 25px 0 25px 50px;
border-color: transparent transparent transparent #FFF;
display: block;
  content:"";
  position: absolute;
  top: 10px;
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download