Ok, so everyone knows you can make a triangle using this:
#triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
And that produces a solid, filled in triangle. But how would you make a hollow-type arrow-like triangle, like this?
This question is related to
html
css
css-shapes
they resize automatically with your text and are colored the same color. Plug and play :)
jsBin demo playground
body{
font-size: 25px; /* Change font and see the magic! */
color: #f07; /* Change color and see the magic! */
}
/* RESPONSIVE ARROWS */
[class^=arr-]{
border: solid currentColor;
border-width: 0 .2em .2em 0;
display: inline-block;
padding: .20em;
}
.arr-right {transform:rotate(-45deg);}
.arr-left {transform:rotate(135deg);}
.arr-up {transform:rotate(-135deg);}
.arr-down {transform:rotate(45deg);}
_x000D_
This is <i class="arr-right"></i> .arr-right<br>
This is <i class="arr-left"></i> .arr-left<br>
This is <i class="arr-up"></i> .arr-up<br>
This is <i class="arr-down"></i> .arr-down
_x000D_
Just use before and after Pseudo-elements - CSS
*{box-sizing: border-box; padding: 0; margin: 0}_x000D_
:root{background: white; transition: background .3s ease-in-out}_x000D_
:root:hover{background: red }_x000D_
div{_x000D_
margin: 20px auto;_x000D_
width: 150px;_x000D_
height: 150px;_x000D_
position:relative_x000D_
}_x000D_
_x000D_
div:before, div:after{_x000D_
content: '';_x000D_
position: absolute;_x000D_
width: 75px;_x000D_
height: 20px;_x000D_
background: black;_x000D_
left: 40px_x000D_
}_x000D_
_x000D_
div:before{_x000D_
top: 45px;_x000D_
transform: rotateZ(45deg)_x000D_
}_x000D_
_x000D_
div:after{_x000D_
bottom: 45px;_x000D_
transform: rotateZ(-45deg)_x000D_
}
_x000D_
<div/>
_x000D_
Here's a different approach:
1) Use the multiplication character: ×
×
2) Hide half of it with overflow:hidden
3) Then add a triangle as a pseudo element for the tip.
The advantage here is that no transforms are necessary. (It will work in IE8+)
.arrow {_x000D_
position: relative;_x000D_
}_x000D_
.arrow:before {_x000D_
content: '×';_x000D_
display: inline-block;_x000D_
position: absolute;_x000D_
font-size: 240px;_x000D_
font-weight: bold;_x000D_
font-family: verdana;_x000D_
width: 103px;_x000D_
height: 151px;_x000D_
overflow: hidden;_x000D_
line-height: 117px;_x000D_
}_x000D_
.arrow:after {_x000D_
content: '';_x000D_
display: inline-block;_x000D_
position: absolute;_x000D_
left: 101px;_x000D_
top: 51px;_x000D_
width: 0;_x000D_
height: 0;_x000D_
border-style: solid;_x000D_
border-width: 25px 0 25px 24px;_x000D_
border-color: transparent transparent transparent black;_x000D_
}
_x000D_
<div class="arrow"></div>
_x000D_
>
itself is very wonderful arrow! Just prepend a div with it and style it.
div{_x000D_
font-size:50px;_x000D_
}_x000D_
div::before{_x000D_
content:">";_x000D_
font: 50px 'Consolas';_x000D_
font-weight:900;_x000D_
}
_x000D_
<div class="arrowed">Hatz!</div>
_x000D_
.arrow {_x000D_
display : inline-block;_x000D_
font-size: 10px; /* adjust size */_x000D_
line-height: 1em; /* adjust vertical positioning */_x000D_
border: 3px solid #000000;_x000D_
border-left: transparent;_x000D_
border-bottom: transparent;_x000D_
width: 1em; /* use font-size to change overall size */_x000D_
height: 1em; /* use font-size to change overall size */_x000D_
}_x000D_
_x000D_
.arrow:before {_x000D_
content: "\00a0"; /* needed to hook line-height to "something" */_x000D_
}_x000D_
_x000D_
.arrow.left {_x000D_
margin-left: 0.5em;_x000D_
-webkit-transform: rotate(225deg);_x000D_
-moz-transform: rotate(225deg);_x000D_
-o-transform: rotate(225deg);_x000D_
-ms-transform: rotate(225deg);_x000D_
transform: rotate(225deg);_x000D_
}_x000D_
_x000D_
.arrow.right {_x000D_
margin-right: 0.5em;_x000D_
-webkit-transform: rotate(45deg);_x000D_
-moz-transform: rotate(45deg);_x000D_
-o-transform: rotate(45deg);_x000D_
-ms-transform: rotate(45deg);_x000D_
transform: rotate(45deg);_x000D_
}_x000D_
_x000D_
.arrow.top {_x000D_
line-height: 0.5em; /* use this to adjust vertical positioning */_x000D_
margin-left: 0.5em;_x000D_
margin-right: 0.5em;_x000D_
-webkit-transform: rotate(-45deg);_x000D_
-moz-transform: rotate(-45deg);_x000D_
-o-transform: rotate(-45deg);_x000D_
-ms-transform: rotate(-45deg);_x000D_
transform: rotate(-45deg);_x000D_
}_x000D_
_x000D_
.arrow.bottom {_x000D_
line-height: 2em;_x000D_
/* use this to adjust vertical positioning */_x000D_
margin-left: 0.5em;_x000D_
margin-right: 0.5em;_x000D_
-webkit-transform: rotate(135deg);_x000D_
-moz-transform: rotate(135deg);_x000D_
-o-transform: rotate(135deg);_x000D_
-ms-transform: rotate(135deg);_x000D_
transform: rotate(135deg);_x000D_
}
_x000D_
<div>_x000D_
here are some arrows_x000D_
<div class='arrow left'></div> space_x000D_
<div class='arrow right'></div> space_x000D_
<div class='arrow top'></div> space_x000D_
<div class='arrow bottom'></div> space with proper spacing?_x000D_
</div>
_x000D_
Similar to Roko C, but a little more control over size and placement.
Left Right Arrow with hover effect using Roko C. Buljan box-shadow trick
.arr {_x000D_
display: inline-block;_x000D_
padding: 1.2em;_x000D_
box-shadow: 8px 8px 0 2px #777 inset;_x000D_
}_x000D_
.arr.left {_x000D_
transform: rotate(-45deg);_x000D_
}_x000D_
.arr.right {_x000D_
transform: rotate(135deg);_x000D_
}_x000D_
.arr:hover {_x000D_
box-shadow: 8px 8px 0 2px #000 inset_x000D_
}
_x000D_
<div class="arr left"></div>_x000D_
<div class="arr right"></div>
_x000D_
This can be solved much easier than the other suggestions.
Simply draw a square and apply a border
property to just 2 joining sides.
Then rotate the square according to the direction you want the arrow to point, for exaple: transform: rotate(<your degree here>)
.triangle {_x000D_
border-right: 10px solid; _x000D_
border-bottom: 10px solid;_x000D_
height: 30px;_x000D_
width: 30px;_x000D_
transform: rotate(-45deg);_x000D_
}
_x000D_
<div class="triangle"></div>
_x000D_
I needed to change an input
to an arrow in my project. Below is final work.
#in_submit {_x000D_
background-color: white;_x000D_
border-left: #B4C8E9;_x000D_
border-top: #B4C8E9;_x000D_
border-right: 3px solid black;_x000D_
border-bottom: 3px solid black;_x000D_
width: 15px;_x000D_
height: 15px;_x000D_
transform: rotate(-45deg);_x000D_
margin-top: 4px;_x000D_
margin-left: 4px;_x000D_
position: absolute;_x000D_
cursor: pointer;_x000D_
}
_x000D_
<input id="in_submit" type="button" class="convert_btn">
_x000D_
Here Fiddle
An other approach using borders and no CSS3 properties :
div, div:after{_x000D_
border-width: 80px 0 80px 80px;_x000D_
border-color: transparent transparent transparent #000;_x000D_
border-style:solid;_x000D_
position:relative;_x000D_
}_x000D_
div:after{_x000D_
content:'';_x000D_
position:absolute;_x000D_
left:-115px; top:-80px;_x000D_
border-left-color:#fff;_x000D_
}
_x000D_
<div></div>
_x000D_
Source: Stackoverflow.com