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

Question

我看到了这个问题和答案：CSS Gradient arrow shape with inner shadow and gradient border 我想创建相同的东西，但每边都有一个箭头。

最终结果如下所示：

Answer 1

不使用渐变背景也可以写css 第一步：写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>

第 2 步：写入 css

span{
    background-color: red;
    width: 180px;
    display: -webkit-box;
    padding: 10px 10px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    position: relative;
}
span.right-arrow:after {
    content: '';
    width: 0;
    height: 0;
    border-top: 21px solid transparent;
    border-left: 21px solid red;
    border-bottom: 21px solid transparent;
    position: absolute;
    right: -21px;
    top: 0;
}

现在工作正常

Answer 2

我会分 3 个步骤完成：

创建一个带有背景渐变（例如从橙色到红色）的普通矩形元素
创建一个带有背景颜色的伪元素::before，渐变开始于（例如橙色）
创建一个带有背景颜色的伪元素::after，渐变以（例如红色）结束

现在你只需要正确定位伪元素并使用 border 属性创建 the triangle shape:

div {
  position: relative;
  display: inline-block;
  text-transform: uppercase;
  color: white;
  height: 3em;
  min-width: 10em;
  line-height: 3em;
  font-family: Arial;
  font-size: 1.5em;
  font-weight: bold;
  text-align: center;
  background: linear-gradient(to right, orange, red);
  padding: 0 1em;
  margin: 0 1em;
}

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;
}

<div>Exemple</div>

Answer 3

W3Schools 在 CSS 中有一个很好的渐变示例：https://www.w3schools.com/css/css3_gradients.asp

背景：linear-gradient（方向，color-stop1，color-stop2，...）

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

对于你的 div 的形状，W3Schools 也有一个很棒的几何形状创建页面：https://www.w3schools.com/howto/howto_css_shapes.asp

但是要粘贴相同的代码两次：

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;
}

Answer 4

只有渐变没有伪元素的解决方案呢：

.arrow {
  text-transform: uppercase;
  color: white;
  width: 200px;
  line-height: 3em;
  font-family: Arial;
  font-size: 1.5em;
  font-weight: bold;
  text-align: center;
  background:
    linear-gradient(to top    left ,orange 50%,transparent 51%) top left    /20px 50%,
    linear-gradient(to bottom left ,orange 50%,transparent 51%) bottom left /20px 50%,
    linear-gradient(to top    right,red    50%,transparent 51%) top right   /20px 50%,
    linear-gradient(to bottom right,red    50%,transparent 51%) bottom right/20px 50%,
    
    linear-gradient(to right, orange, red) 20px 0/calc(100% - 40px) 100% ;
  background-repeat:no-repeat;   
  margin: 20px;
}

<div class="arrow">Exemple</div>
<div class="arrow">work with <br>2 lines</div>

这是另一个 clip-path:

.arrow {
  text-transform: uppercase;
  color: white;
  width: 200px;
  line-height: 3em;
  font-family: Arial;
  font-size: 1.5em;
  font-weight: bold;
  text-align: center;
  background: linear-gradient(to right, orange, red);
  margin: 20px;
  clip-path: polygon(90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%, 10% 0);
}

<div class="arrow">Exemple</div>
<div class="arrow">work with <br>2 lines</div>

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

CSS Gradient double-arrow shape with gradient background

html

css

linear-gradients

css-shapes