Html 带有渐变背景的CSS渐变双箭头形状

我看到了这个问题和答案：我想创造同样的东西，但两边各有一个箭头

以下是最终结果：

---

您也可以在不使用渐变背景的情况下编写css 步骤1：编写html

 <span class="right-arrow" style="
    background-color: red;
    width: 16%;
    display: -webkit-box;
    padding: 10px 10px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    position: relative;
">
  Example
  </span>

---

现在它运行良好

我将分三步进行：

创建具有背景渐变（例如从橙色到红色）的普通矩形元素

创建一个伪元素

：：在使用背景色的
之前，渐变以（例如橙色）开始

创建一个伪元素

：：在带有背景色的
之后，渐变以（例如红色）结尾

现在，您只需正确定位伪元素，并使用

border

属性创建：

div{
位置：相对位置；
显示：内联块；
文本转换：大写；
颜色：白色；
高度：3em；
最小宽度：10em；
线高：3em；
字体系列：Arial；
字号：1.5em；
字体大小：粗体；
文本对齐：居中；
背景：线性渐变（向右，橙色，红色）；
填充：0.1em；
边缘：0 1米；
}
div：：之前，
div：：之后{
内容：''；
位置：绝对位置；
身高：0；
宽度：0；
边框顶部：1.5em实心透明；
边框底部：1.5em实心透明；
}
div：：之前{
左：-1米；
右边框：1米实心橙色；
}
div：：之后{
右：-1em；
左边框：1米纯红；
}

---

example

W3Schools在CSS中有一个很好的渐变示例：

背景：线性渐变（方向、颜色停止1、颜色停止2等）

对于div的形状，W3Schools还有一个创建几何形状的好页面：

但要将同一代码粘贴两次：

div {
  position: relative;
  display: inline-block;
  height: 3em;
  min-width: 10em;
  background: linear-gradient(to right, orange, red);
  padding: 0 1em;
  margin: 0 2em;  
}

div::before,
div::after {
  content: '';
  position: absolute;
  height: 0;
  width: 0;
  border-top: 1.5em solid transparent;
  border-bottom: 1.5em solid transparent;
}

div::before {
  left: -1em;
  border-right: 1em solid orange;
}

div::after {
  right: -1em;
  border-left: 1em solid red;
}

---

一个只有梯度而没有伪元素的解决方案呢

.arrow{
文本转换：大写；
颜色：白色；
宽度：200px；
线高：3em；
字体系列：Arial；
字号：1.5em；
字体大小：粗体；
文本对齐：居中；
背景：
线性渐变（至左上角，橙色50%，透明51%）左上角/20px 50%，
线性渐变（至左下角，橙色50%，透明51%）左下角/20px 50%，
线性梯度（至右上角，红色50%，透明51%），右上角/20px 50%，
线性梯度（至右下角，红色50%，透明51%），右下角/20px 50%，
线性梯度（向右、橙色、红色）20px 0/钙（100%-40px）100%；
背景重复：无重复；
利润率：20px；
}

示例
使用
2行

谢谢，这是另一个很好的方法。如果我使用方向梯度（deg），它将不美观。例如：线性梯度（143deg，#EBD584 0%，#DDAE00 100%）

background: linear-gradient(to right, red , yellow);

div {
  position: relative;
  display: inline-block;
  height: 3em;
  min-width: 10em;
  background: linear-gradient(to right, orange, red);
  padding: 0 1em;
  margin: 0 2em;  
}

div::before,
div::after {
  content: '';
  position: absolute;
  height: 0;
  width: 0;
  border-top: 1.5em solid transparent;
  border-bottom: 1.5em solid transparent;
}

div::before {
  left: -1em;
  border-right: 1em solid orange;
}

div::after {
  right: -1em;
  border-left: 1em solid red;
}