CSS：按钮上的多个箭头答案

【问题标题】：CSS: multiple arrows on a buttonCSS：按钮上的多个箭头
【发布时间】：2021-11-04 17:48:03
【问题描述】：

我想在右侧制作一个带有多个箭头的按钮，如下所示：

这就是我所做的：https://jsfiddle.net/aqjfLy7s/。我无法弄清楚如何让第一个箭头与按钮边框齐平。所有后续箭头也必须遵循相同的模式。

.wrapper {
  width: 50%;
  border: 1px solid #ccc;
  padding: 50px 0px;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.w1 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-left: 30px;
}

.w2 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 30px;
  margin-right: 30px;
  background-color: #ffcc00;
  padding: 10px;
}

.btn {
  color: #000;
  border: 1px solid #000;
  border-right: none;
  padding: 0.5rem 1rem;
  width: 80%;
}

span {
  width: 1rem;
  height: 1rem;
  border: 0.25rem solid;
  border-color: black transparent transparent black;
  transform: rotate(135deg);
  margin-left: -12px;
}

<div class="wrapper">
  <div class="w1">
    <a class="btn" href="#">Test</a>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
  <div class="w2">123</div>
</div>

【问题讨论】：

标签： css css-shapes

【解决方案1】：

这是另一个代码更少的想法，您可以简单地依赖伪元素和倾斜转换

.box {
  display:inline-block;
  padding:10px;
  margin-right:60px;
  border:1px solid;
  border-right:none;
  position:relative;
}
.box:before,
.box:after{
  content:"";
  position:absolute;
  margin-left:-1px;
  top:-1px;
  left:100%;
  bottom:50%;
  width:30px;
  background:linear-gradient(to right,#000 28%,transparent 29%) 1px 0/25% 100%;
  transform:skewX(45deg);
  transform-origin:top;
}
.box:after {
  transform:skewX(-45deg);
  transform-origin:bottom;
  bottom:-1px;
  top:50%;
}

<div class="box">
  some text
</div>

<div class="box">
  some long long text
</div>


<div class="box">
  2 lines <br> text
</div>

您可以轻松缩放到任意数量的边框

.box {
  --b:4;
  display:inline-block;
  padding:10px;
  margin:5px;
  margin-right:calc(var(--b)*15px);
  border:1px solid;
  border-right:none;
  position:relative;
}
.box:before,
.box:after{
  content:"";
  position:absolute;
  margin-left:-1px;
  top:-1px;
  left:100%;
  bottom:50%;
  width:calc(var(--b)*7.5px);
  background:linear-gradient(to right,#000 28%,transparent 29%) 1px 0/calc(100%/var(--b)) 100%;
  transform:skewX(45deg);
  transform-origin:top;
}
.box:after {
  transform:skewX(-45deg);
  transform-origin:bottom;
  bottom:-1px;
  top:50%;
}

<div class="box">
  some text
</div>

<div class="box" style="--b:2">
  some long long text
</div>


<div class="box" style="--b:10">
  2 lines <br> text
</div>


<div class="box" style="--b:30">
  some long long text
</div>

这是一个Codepen 玩代码

【讨论】：