多重倾斜矩形

Question

我正在尝试用 CSS

制作类似的东西

应该可以吗？

这就是我差点得到的

a {
  font-weight: 700;
  color: #fff;
  padding: 0px 20px 0px 18%;
  background: #00aeef;
  text-transform: uppercase;
  position: relative;
}

a::after {
  content: " ";
  position: absolute;
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  background: #00aeef;
  transform-origin: bottom left;
  -ms-transform: skew(-30deg, 0deg);
  -webkit-transform: skew(-30deg, 0deg);
  transform: skew(-30deg, 0deg);
}

<a href="#">Teste</a>

那么怎么才能像布局那样做多重倾斜呢？

Answer 1

您可以在伪元素中使用渐变更改背景颜色；

a {
  font-weight: 700;
  color: #fff;
  padding: 0px 20px 0px 18%;
  text-transform: uppercase;
  background:#00aeef;
  position: relative;
}

a::after {
  content: " ";
  position: absolute;
  width: 40px;
  height: 100%;
  top: 0;
  left: 100%;
  z-index: -1;
  background: 
  linear-gradient(to right, #00aeef 10px,
        transparent 11px,transparent 15px,
        #00aeef 16px,#00aeef 30px,
        transparent 31px,transparent 35px,
        #00aeef 36px,#00aeef 40px
        );
  transform-origin:top left;
  transform: skewX(-30deg)
}

<a href="#">Teste</a>

你也可以用一个元素来实现，考虑到多重背景，不需要伪元素和变换：

a {
  font-weight: 700;
  color: #fff;
  padding: 0px 60px 0px 18%;
  text-transform: uppercase;
  background: 
  linear-gradient(#00aeef,#00aeef) left/calc(100% - 40px) 100% no-repeat,
  linear-gradient(115deg, #00aeef 10px,
        transparent 11px,transparent 15px,
        #00aeef 16px,#00aeef 25px,
        transparent 26px,transparent 30px,
        #00aeef 31px,#00aeef 35px,
        transparent 35px, transparent 100%) right/40px 100% no-repeat;
}

<a href="#">Teste</a>

Answer 2

通过使用 border 和 box-shadow 对您自己的代码进行少量更新，我能够达到预期的结果，请查看下面的工作代码段:)

a {
  font-weight: 700;
  color: #fff;
  padding: 0px 50px 0px 18%;
  background: #00aeef;
  text-transform: uppercase;
  position: relative;
}

a:after {
  content: " ";
  position: absolute;
  display: block;
  width: 10px;
  height: 100%;
  top: 0;
  right: 0;
  z-index: 1;
  background: #00aeef;
  transform-origin: bottom left;
  -ms-transform: skew(-30deg, 0deg);
  -webkit-transform: skew(-30deg, 0deg);
  transform: skew(-30deg, 0deg);
  border-left: 5px solid white;
  border-right: 5px solid white;
  box-shadow: 5px 0 0 0 #00aeef;
}

<a href="#">Teste</a>

多重倾斜矩形

Multiple skew rectangle

html

css

css-transforms