how to change triangle to up arrow using pure css

Question

Here is fiddle example: example

Question1: I have a flowing arrow triangle css:

.wrapper {
    background-color: black;
    width: 100px;
    height: 100px;
}

.downArror {
    float: left;
    display: inline-block;
    border: 15px solid rgba(0, 0, 0, 0);
    border-bottom-color: #fff;
    margin: 8px;
}

HTML:

<div class="wrapper"><div class="downArror"></div></div>

Just wondering, is there a way to change the css that make this triangle to a '^' shape?

what I'd like to have is something like this: enter image description here

Question2:

Is there a way to make a tick like this using code?: enter image description here I am currently using &#8730 but, the shape is slightly different

Check this site out: http://apps.eky.hk/css-triangle-generator/ — DevlshOne, Oct 03 '13 at 01:12
Yea, this is pretty easy.. I wrote an answer on something similar. You can overlay `:after`/`:before` `pseudo` elements .. see http://stackoverflow.com/questions/19040655/creating-box-with-notches-in-the-middle-without-any-images/19040865#19040865 — Josh Crozier, Oct 03 '13 at 01:13
Please do not post multiple questions in a single StackOverflow question - if they are different questions, post different questions for each. — Nightfirecat, Oct 03 '13 at 01:48
It's right @Nightfirecat, I agree but this one seems a single subject to me, same thing. — The Alpha, Oct 03 '13 at 01:49
I don't agree; the former of his questions is asking how to style his arrow to be an outline, as opposed to a filled triangle, where the latter is asking (unrelatedly) if it's possible to create *X* shape using CSS. — Nightfirecat, Oct 03 '13 at 01:53

score 2 · Accepted Answer · answered Oct 03 '13 at 02:11

I actually created this effect awhile back for a menu. You can find it here:

http://codepen.io/spikeyty/pen/IFBro

Basically, I took a transparent div, added bottom-left and bottom-right borders, and then rotated the div 45deg using transform. For extra sweetness the example has a neat hover effect. Enjoy!

The Alpha · Answer 2 · 2014-09-19T17:07:32.843

1

It's possible using css : (Hope you meant this)

.wrapper{
    background-color:black;
    width:20px;
    height:20px;
    text-align:center;
 }

.downArror_black:before{
 content:'\2227';
    color:#fff;
}

.tick:before{
    content:'\2713';
    color:#fff;
}

<div class="wrapper">
    <div class="downArror_black"></div>
</div>
<br />
<div class="wrapper">
    <div class="tick"></div>
</div>

edited Sep 19 '14 at 17:07

answered Oct 03 '13 at 01:47

The Alpha

143,660
29
287
307

This is a useful answer, but I solved those problems by making icon images instead , as exactly shape of tick and arrow are required...thank you anyway! – JavaScripter Oct 03 '13 at 02:47

how to change triangle to up arrow using pure css

2 Answers2