Daniel Daniel - 2 months ago 9
Sass (Sass) Question

need to make div look empty on both side with css

enter image description here

I need to make the background of a div to look like this.I tried some stuff with linear-gradients..but..didn't make it.Any ideas ?

Answer

I've created a codepen for you:

http://codepen.io/anon/pen/JRbaZo

.rectangle {
  width: 200px;
  height: 40px;
  background-color: red;
  position: relative;
}

.rectangle:before {
  position: absolute;
  left: 0;
  top: 0;
  width: 0; 
  height: 0;
  content: '';
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 20px solid white;
}

.rectangle:after {
  position: absolute;
  right: 0;
  top: 0;
  width: 0; 
  height: 0;
  content: '';
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 20px solid white;
}

Also please look here to find some useful tricks how to create triangles in css