CODEWITHSUNDEEP
css
uneeb meer
uneeb meer

Reputation: 692

How to make a right pointed arrow using css

I'm creating some custom shapes using CSS I want to draw an arrow whose pointer is on the right side and is aligned left to the div I actually made an arrow which pointer was to the left but I'm having difficulty in making an arrow whose pointer is on right side. Here's a picture of how I want it
arrow

Here's my html code

<div class="arrow">
   <img style="width:70%" src="https://i.imgsafe.org/a842cd10d7.png" class="img-responsive">
</div>

css

.arrow {
    position: relative;
}

.arrow::after {
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    left: 0;
    border-style: solid;
    border-width: 18px 30px 18px 0;
    border-color: transparent #fff transparent transparent;
    bottom: 45px;
}

FIDDLE

Upvotes: 0

Views: 2822

Answers (2)

Mifort
Mifort

Reputation: 267

Take a look here I did it (and made arrow in red so it will be easier to see):

.arrow {
    position: relative;
    padding: 20px;
}
.arrow::after {
    position: absolute;
    z-index: 200;
    content: '';
    width: 0;
    height: 0;
    left: 20px;
    border-style: solid;
    border-width: 22px 0 22px 17px;
    border-color: transparent transparent transparent red;
    bottom: 62px;
}

Upvotes: 1

Jon Uleis
Jon Uleis

Reputation: 18639

You just needed to swap the left/right values of your border rules to make the arrow face the opposite direction.

Change this:

border-width: 18px 30px 18px 0;
border-color: transparent #fff transparent transparent;

To this:

border-width: 18px 0 18px 30px;
border-color: transparent transparent transparent #fff;

And then to match your example image, I changed the 30px side to also be 18px, forming an equilateral triangle. 

.arrow {
  position: relative;
}
.arrow::after {
  position: absolute;
  content: '';
  width: 0;
  height: 0;
  left: 0;
  border-style: solid;
  border-width: 18px 0 18px 18px;
  border-color: transparent transparent transparent #fff;
  bottom: 45px;
}
<div class="arrow">
  <img style="width:70%" src="https://i.imgsafe.org/a842cd10d7.png" class="img-responsive">
</div>

Upvotes: 3

Related Questions