CODEWITHSUNDEEP
htmlcsscss-shapes
TNK
TNK

Reputation: 4323

Making arrow head without using image

I am trying to make a right arrow head alone with a title without using an image. But I can not figure it out. Hope someone will help me out.

HTML : 

<h4>This is for My Title</h4>

CSS : 

h4 {
  color: #666;
  background: red;
  width: 250px;
  display: block;
  padding: 3px 10px;
}

h4:after { 
  content:" ";
  width: 0; 
  height: 0; 
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 14px solid green;
  margin: 0 10px;

}

This is JsFiddle

Any help will be greatly appreciated. Thank you.

Upvotes: 1

Views: 2407

Answers (3)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201568

Use a suitable character like “▶” BLACK RIGHT-POINTING TRIANGLE (U+25B6), e.g. with

h4:after { 
  content:" \25b6";
}

Using an image is generally more reliable, though, since there are potential font issues with special characters. An image also lets you select the exact shape you want.

Upvotes: 1

bPratik
bPratik

Reputation: 7019

A good and more simpler way to achieve this would be to use the following HTML/CSS.

I have added an element into the H4 to be the placeholder for the arrowhead.

HTML

<h4>This is for My Title <span class="arrow-right"></span></h4>

CSS

.arrow-right {
    width: 0; 
    height: 0; 
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid green;
    display: inline-block;
}

Demo fiddle: http://jsfiddle.net/pratik136/FHShC/2/

CSS courtesy: http://css-tricks.com/snippets/css/css-triangle/

Upvotes: 1

icktoofay
icktoofay

Reputation: 129011

The :after has a display of inline, so it's ignoring the height. Set the display to inline-block.

h4:after {
    display: inline-block;
    /* ... */
}

Try it.

Upvotes: 2

Related Questions