使用CSS或SVG创建Tab形状 [英] Creating a Tab shape with CSS or SVG

问题描述

有没有人知道如何使这个分页的形状：

解决方案

这里是一个使用CSS3变换实现所需形状的替代方法。像SVG答案一样，当背景（形状后面）不是纯色时，也可以使用此方法。

该片段有两个样本和

• 使用 transform：skew（45deg）和 overflow：hidden 在父项上隐藏左侧的倾斜区域。


• 其他使用 rotateX 位透视以产生倾斜/倾斜侧。 transform-origin 设置意味着只有一边有角度。

div class =snippetdata-lang =jsdata-hide =false>

  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;背景：＃c94935; z-index：-1;} div.a：after {position：absolute; content：''; top：0px; left：-20px;宽度：60％; -webkit-transform：skew（45deg）; -moz-transform：skew（45deg）; transform：skew（45deg）; height：20px;背景：＃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）;背景：＃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>  

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

解决方案

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>

这篇关于使用CSS或SVG创建Tab形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！