Creating a Tab shape with CSS or SVG

问题

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

回答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>

回答2:

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>

回答3:

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>

回答4:

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>

回答5:

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>

来源：https://stackoverflow.com/questions/29917180/creating-a-tab-shape-with-css-or-svg

标签

html

css

css3

svg

css-shapes