CODEWITHSUNDEEP
htmlcsssvgcss-shapes
Souhaib Abouricha
Souhaib Abouricha

Reputation: 57

Creating a Tab shape with CSS or SVG

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

enter image description here

Upvotes: 0

Views: 2660

Answers (5)

Harry
Harry

Reputation: 89780

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>

Upvotes: 4

Paul LeBeau
Paul LeBeau

Reputation: 101898

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>

Upvotes: 1

Persijn
Persijn

Reputation: 15000

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>

Upvotes: 1

Arun Bertil
Arun Bertil

Reputation: 4648

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>

Upvotes: 1

Niels Keurentjes
Niels Keurentjes

Reputation: 41968

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>

Upvotes: 2

Related Questions