CODEWITHSUNDEEP
css
Jitendra Vyas
Jitendra Vyas

Reputation: 152677

How to make Down arrow icon by pure css to use it as a background?

Is it possible to make a down arrow like this using pure css to use it as a background?

Actual size image

enter image description here

Enlarged images

enter image description here

I know it's possible to use an image and we can make this arrow with the border tricks too

#triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
}

But this we can't use as a background. Is there a way to make the arrow to use as a css background.

Upvotes: 0

Views: 9052

Answers (2)

BoltClock
BoltClock

Reputation: 723688

You can't create a CSS pattern on an element and then use that pattern as a CSS background of another element. You can cheat by using pseudo-elements or adding other child elements in your HTML, but a pure CSS background image isn't possible.

You'll have to make an image and use that as a background image instead.

Upvotes: 1

SpaceBeers
SpaceBeers

Reputation: 13947

Not sure if this is what you're after but you can make it appear as a background like so:

http://jsfiddle.net/spacebeers/8vHQF/1/

.container {
    width: 100px;
    height: 100px;
    position: relative;
}

.triangle {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
    z-index: 0;
}

.content{  
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100px;
    height: 100px;
    z-index: 1;
}

<div class="container">
    <div class="triangle"></div>
    <div class="content">
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
    </div>
</div>

EDIT: Personally I'd use a sprite though.

Upvotes: 1

Related Questions