Creating a Tab shape with CSS or SVG

Question

Does anyone have an idea how to make this tab like shape :

Answer 1

Here is an alternate approach using CSS3 transforms for achieving the required shape. Like the SVG answer, this method can also be used when the background (behind the shape) is not a solid color.

The snippet has two samples and

• One uses transform: skew(45deg) and overflow: hidden on the parent to hide the skewed area on the left side.
• Other uses a rotateX transform with a bit of perspective to produce the skewed/angled side. The transform-origin setting means that only one side is angled.

div.a {
  position: relative;
  height: 70px;
  width: 250px;
  margin-top: 20px;
  padding: 24px 4px 0px;
  overflow: hidden;
}
div.a:before {
  position: absolute;
  content: '';
  top: 20px;
  left: 0px;
  width: 100%;
  height: 50px;
  background: #c94935;
  z-index: -1;
}
div.a:after {
  position: absolute;
  content: '';
  top: 0px;
  left: -20px;
  width: 60%;
  -webkit-transform: skew(45deg);
  -moz-transform: skew(45deg);
  transform: skew(45deg);
  height: 20px;
  background: #c94935;
  z-index: -1;
}
div.b {
  position: relative;
  height: 50px;
  width: 250px;
  padding: 4px 4px 0px;
  margin-top: 40px;
  background: #c94935;
}
div.b:before {
  position: absolute;
  content: '';
  top: -20px;
  left: 0px;
  width: 50%;
  height: 20px;
  -webkit-transform-origin: left top;
  -moz-transform-origin: left top;
  transform-origin: left top;
  -webkit-transform: perspective(10px) rotateX(5deg);
  -moz-transform: perspective(10px) rotateX(5deg);
  transform: perspective(10px) rotateX(5deg);
  background: #c94935;
}
body {
  background: url(http://lorempixel.com/500/500);
}

<div class="a">
  Lorem Ipsum Dolor Sit Amet...
</div>
<div class="b">
  Lorem Ipsum Dolor Sit Amet...
</div>

Answer 2

The CSS solutions create the tab shape by placing a white shape on top of the brown. If you have something behind the shape, that might not be desirable.

Here is an SVG reproduction of your image.

<svg width="396" height="120" viewBox="0 0 396 120">
  <path d="M 0,33 H 198 L 228,63 H 396 V 120 H 0 Z" fill="#c94935"/>
</svg>

Answer 3

Here is figure:

Setting the border of an after element so that it cancels out the top part of the shape :)

.box {
  position: relative;
  background-color: tomato;
  width: 300px;
  height: 200px;
}
.box:before {
  content:"";
  position: absolute;
  right: 0;
  width: 100px;
  border-bottom: 15px solid transparent;
  border-left: 15px solid transparent;
  border-top: 15px solid white;
}
.box span {
  
}

<figure class="box"><br><span>Here you get a nice folder like figure :D</span></figure>

Answer 4

div {
    background:brown;
    width:500px;
    height:100px;
    position:relative;
}
div:after {
    content:'';
    position:absolute;
    background:white;
    border:40px solid;
    border-bottom:0;
    border-color:white white brown brown;
    top:0;
    right:0;
    width:30%;
}

<div></div>

Answer 5

Take a single <div>, and apply:

div {
    background:red;
    width:500px;
    height:150px;
    position:relative;
}
div:after {
    content:'';
    position:absolute;
    background:white;
    border:40px solid;
    border-bottom:0;
    border-color:white white red red;
    top:0;
    right:0;
    width:30%;
}

<div></div>