Css double arrow

Question

Example of what i want to do right:

I'm trying to create an arrow more like a double arrow. My aim is to have one class for it but I have tried what I know and it's not working.

If anyone can direct me to right way it will be great

.wrapper{
  width: 250px;
  height: 150px;
  background:black;
}
.arrow1{  
  left:0px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 37.5px 0 37.5px 75px;
  border-color: transparent transparent transparent #007bff;
}

<div class="wrapper">
    <div class="arrow1"></div>
</div>

https://jsfiddle.net/7mfquq2y/

Thanks

Possible duplicate of Is it possible to make a "double arrow" with css3 content technique? — achref
– achref, Commented Nov 28, 2017 at 15:20
Please read Something on my web site doesn't work. Can I just paste a link to it?. Questions that depend on external resources to be understood become useless when the external resource goes away or is fixed. Create a minimal reproducible example and put it in the question itself instead. — Quentin
– Quentin, Commented Nov 28, 2017 at 15:21

Temani Afif · Accepted Answer · 2017-11-28 15:33:16Z

3

You may consider pseudo element and rotation like this :

.arrow1 {
  height: 120px;
  width: 100px;
  overflow: hidden;
  position: relative;
}

.arrow1:before,
.arrow1:after {
  content: " ";
  position: absolute;
  width: 60px;
  height: 60px;
  background: rgba(0, 128, 0, 0.6);
  transform: rotate(45deg);
  left: -30px;
  top: 40px;
}

.arrow1:after {
  top: 20px;
}

<div class="arrow1"></div>

edited Nov 28, 2017 at 15:33

answered Nov 28, 2017 at 15:30

Temani Afif

280k30 gold badges379 silver badges504 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

UncaughtTypeError · Accepted Answer · 2017-11-28 15:38:49Z

1

Alternatively, applying initial border property values to pseudo-elements, as demonstrated in the code snippet embedded below.

Code Snippet Demonstration:

.wrapper{
  width: 250px;
  height: 150px;
  background:black;
}
.arrow {
  height: 95px;
  position: relative; /* required */
}
.arrow:before, .arrow:after {
  content: "";
  position: absolute;
  left: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 37.5px 0 37.5px 40px;
  border-color: transparent transparent transparent rgba(0, 123, 255, 0.7);
}
.arrow:after {  
  bottom: 0;
}
.arrow:before {
  top: 0;
}

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

Updated JSFiddle

answered Nov 28, 2017 at 15:38

UncaughtTypeError

8,8824 gold badges26 silver badges39 bronze badges

Collectives™ on Stack Overflow

Css double arrow

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related