CODEWITHSUNDEEP
htmlcssjsfiddle
jennifer Jolie
jennifer Jolie

Reputation: 727

Construct two arrow with css

I'm want trying to accomplish something very, very similar to the below picture (two arrow) with CSS3 only. for next and prev.

enter image description here

What I need to know is how to construct what's shown in the above picture -- with CSS3 only?

Upvotes: 0

Views: 2328

Answers (3)

koko
koko

Reputation: 958

If you want them to look as similiar to your given images as possible, you're propably best off using base64 images.

Google something like "image to base64": http://www.base64-image.de/

Upload your images and use the given base64 string as background-image.

<style type="text/css">
div.image {
    background-image: url('data:image/png;base64,[...]');
}
</style>

Upvotes: 1

Lord-David
Lord-David

Reputation: 545

Make use of a list and instead of bullets use arrows...For Example but not in CSS I'm sure you can do this in CSS.

<ul style="list-style-image: image(ltr 'arrow.png');">
<li dir='ltr'>My bullet is on the left!</li>
<li dir='rtl'>MY BULLET IS ON THE RIGHT!</li>
</ul>

It should be Something like this then you can align them in one line

⇒ My bullet is on the left!
!THGIR EHT NO SI TELLUB YM ⇐

Upvotes: -1

Ahsan Khurshid
Ahsan Khurshid

Reputation: 9469

HTML:

<div class="arrow">
    <div class="triangle-left"></div>
    <div class="tail left-arrow"></div>
</div>

<div class="arrow">
    <div class="triangle-right"></div>
    <div class="tail right-arrow"></div>
</div>

CSS:

.arrow { position:relative; width: 130px; }
.triangle-left {
    border-color: transparent green transparent transparent;
    border-style: solid;
    border-width: 20px;
    width: 0;
    height: 0;
        float: left;
}
.triangle-right {
    border-color: transparent transparent transparent green;
    border-style: solid;
    border-width: 20px;
    width: 0;
    height: 0;
        float: right;
}
.tail { width: 20px; height: 10px; position: absolute; background-color: green }
.tail.left-arrow { left: 40px; top: 15px }
.tail.right-arrow { right: 40px; top: 15px }

SEE DEMO

Upvotes: 1

Related Questions