Question

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

以下是最终结果：

Answer 1

我会分三步完成：

创建一个带有背景渐变的普通矩形元素（例如从橙色到红色）
使用背景颜色创建伪元素::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 2

您也可以在不使用渐变背景的情况下编写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>

第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 3

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

background：线性渐变（direction，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

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

＆＃13;

.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%)0 0/20px 50% no-repeat,
    linear-gradient(to bottom left,orange 50%,transparent 51%)0 100%/20px 50% no-repeat,
    linear-gradient(to top right,red 50%,transparent 51%)100% 0/20px 50% no-repeat,
    linear-gradient(to bottom right,red 50%,transparent 51%)100% 100%/20px 50% no-repeat,
    linear-gradient(to right, orange, red) 20px 0/calc(100% - 40px) 100% no-repeat;
  margin: 20px;
}

＆＃13;

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

＆＃13;

这是另一个带剪辑路径的人：

＆＃13;

.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;
  -webkit-clip-path: polygon(90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%, 10% 0);
clip-path: polygon(90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%, 10% 0);
}

＆＃13;

<div class="arrow">Exemple</div>

＆＃13;

CSS渐变双箭头形状与渐变背景

4 个答案: