CSS - Creating a custom arrow

Question

Hi I am trying to create a custom arrow in CSS that looks like the image below.
Ideally I want to create this by overlaying two shapes a triangle and a rectangle (maybe using CSS :after and :before) but I'm not too savvy when it comes to CSS so I have been struggling.I started by just using borders but doesn't look like it is going to work

So far I just have:

.arrow {
  width: 0;
  height: 0;
  border-top: 60px solid transparent;
  border-bottom: 60px solid transparent;
  border-left: 60px solid #ccc;
}

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

why not use an image that you can adjust in size, rather then trying to draw an arrow using css? — thiebo
– thiebo, Commented Feb 8, 2017 at 20:01

Tha'er AlAjlouni ثائر العجلوني · Accepted Answer · 2017-02-08 20:09:26Z

2

Not too hard to make using the :before pseudo element and some transforms:

.container {
   padding: 100px;
}

.arrow {
  display: inline-block;
  height: 150px;
  background: #000;
  width: 75px;
}
.arrow:before {
  content: "";
  border-top: 100px solid #000;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 100px solid transparent;
  transform: rotateZ(180deg) translateY(100%) translateX(31%);
  position: relative;
  display: inline-block;
}

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

edited Feb 8, 2017 at 20:09

Tha'er AlAjlouni ثائر العجلوني

15.6k7 gold badges37 silver badges40 bronze badges

answered Feb 8, 2017 at 20:04

yaakov

4,7274 gold badges29 silver badges55 bronze badges

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

Comments

Serg Chernata · Accepted Answer · 2017-02-08 20:06:00Z

0

Here's another option.

.arrow{
  width: 0; 
  height: 0; 
  border-top: 60px solid transparent;
  border-bottom: 60px solid transparent;
  border-left: 60px solid #ccc;
  position: relative;
  margin: 0 0 0 100px;
}

.arrow::before{
  content: "";
  height:50px;
  width:80px;
  background: #ccc;
  position: absolute;
  top: 0;
  margin: -100%;
  display: block;
  transform: translateX(-160%) translateY(-50%);
}

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

answered Feb 8, 2017 at 20:06

Serg Chernata

12.4k6 gold badges35 silver badges50 bronze badges

Comments

Nenad Vracar · Accepted Answer · 2017-02-08 20:13:01Z

0

Create one rectangle and then add triangle on top with :before pseudo-element and that is it.

.arrow {
  width: 36px;
  height: 50px;
  background: #3F3F3F;
  position: relative;
  margin: 60px;
}
.arrow:before {
  content: '';
  border-style: solid;
  border-width: 0 40px 40px 40px;
  border-color: transparent transparent #3F3F3F transparent;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -100%);
}

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

answered Feb 8, 2017 at 20:13

Nenad Vracar

122k16 gold badges160 silver badges184 bronze badges

Comments

Alejalapeno · Accepted Answer · 2017-02-08 20:19:55Z

To explain and demonstrate:

A CSS arrow is created by coloring 1 border side, and then moving the other 3 sides in towards the middle of the shape as transparent so they don't show but cut the remaining colored side into a triangle. The shorthand for this is TOP RIGHT BOTTOM LEFT. So to make a triangle pointing upwards you use the third property or bottom.

Using pseudo elements (incase you want the arrow added to another element) you need content:'' to "create" the pseudo element. I've set them as display: block so that they are in the flow and interact with eachother (rather than being laid on top of one another).

By giving the rectangle position: relative you can then use left: 30px (half of the triangle width) to position it in the middle of the triangle.

.arrowWrapper:before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 60px 60px 60px;
  border-color: transparent transparent black transparent;
  /* border-color: TOP RIGHT BOTTOM LEFT; */
}

.arrowWrapper:after {
  content: '';
  position: relative;
  display: block;
  width: 60px;
  height: 60px;
  background: black;
  left: 30px;
}

<div class="arrowWrapper"></div>

gwally · Accepted Answer · 2017-02-08 20:21:21Z

0

Lifted and modified from http://www.cssportal.com/css3-shapes/:

#eq-triangle {
  width: 0;
  height: 0;
  border-bottom: 104px solid blue;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
}

#rectangle {
   width: 40px; 
   height: 80px;
   background: blue;
   margin-left: 40px;
}

<div id="eq-triangle"></div>
<div id="rectangle"></div>

answered Feb 8, 2017 at 20:21

gwally

3,5852 gold badges16 silver badges28 bronze badges

Collectives™ on Stack Overflow

CSS - Creating a custom arrow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related