多个偏斜矩形

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>