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:
Add a comment
|
4 Answers
I would do it in 3 steps:
- create a normal rectangular element with a background gradient (e.g. from orange to red)
- create a pseudo element
::beforewith a background color, the gradient is starting with (e.g. orange) - create a pseudo element
::afterwith 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>1 Comment
Nam Lee
It will not beauty if I use gradient with direction (deg). exemple: linear-gradient(143deg, #EBD584 0%, #DDAE00 100%)
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>
Comments
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
1 Comment
Lucien Dubois
THank you, it's another great way to do it.
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;
}