CSS Gradient double-arrow shape with gradient background

问题

I saw this question and answer: CSS Gradient arrow shape with inner shadow and gradient border and I'm looking to create the same thing but with an arrow on each side.

Here is what the final result would looks like:

回答1:

I would do it in 3 steps:

1. create a normal rectangular element with a background gradient (e.g. from orange to red)
2. create a pseudo element ::before with a background color, the gradient is starting with (e.g. orange)
3. create a pseudo element ::after with a background color, the gradient is ending with (e.g. red)

Now you just need to position the pseudo elements properly and use the border property to create 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>

回答2:

What about a solution with only gradient and no pseudo element:

.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>

And here is another one with 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>

回答3:

You Can also write css without using gradient background Step 1: write 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>

Step 2: Write 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;
}

Now it working fine

回答4:

W3Schools has a great example of gradients in CSS: https://www.w3schools.com/css/css3_gradients.asp

background: linear-gradient(direction, color-stop1, color-stop2, ...)

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

For the shape of your div, W3Schools also has a great page for creating geometric shapes: https://www.w3schools.com/howto/howto_css_shapes.asp

But to paste the same code twice:

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

来源：https://stackoverflow.com/questions/49615576/css-gradient-double-arrow-shape-with-gradient-background