I'm having so much trouble getting this arrow designed how I want.
Right now I'm stuck with a solid triangle and I'm trying to turn it into a "hairline" arrow, like so: http://davidkelley.me/2013/03/01/css-hairline-arrows.html .
.hairline-down-arrow { border: 1px solid black; border-radius: 50%; width: 65px; height: 65px; background-color: white; } .hairline-down-arrow:after { content: ""; position: relative; top: 44px; left: 15px; border-top: solid 25px black; border-right: solid 15px transparent; border-bottom: solid 25px transparent; border-left: solid 15px transparent; }
<section class="hairline-down"> <div class="hairline-down-arrow"></div> </section>
Any help? Thanks.
Why not just use an svg
?
<svg width="70" height="55" viewBox="-2.5 -5 75 60" preserveAspectRatio="none"> <path d="M0,0 l35,50 l35,-50" fill="none" stroke="black" stroke-linecap="round" stroke-width="5" /> </svg>
Or you could use a :pseudo-element.
div { position: relative; width: 80px; height: 1px; background: black; transform: rotate(55deg); transform-origin: 0% 0%; } div:after { content: ''; position: absolute; width: 100%; height: 100%; bottom: 0; left: 100%; background: black; transform: rotate(-110deg); transform-origin: 0% 100%; }
<div></div>
you can use border
for pseudo element and rotate
, skew
so that it
.hairline-down-arrow { border: 1px solid black; border-radius: 50%; width: 65px; height: 65px; position: relative; background-color: white; } .hairline-down-arrow:after { content: ""; position: absolute; top: 4%; left: 54%; width: 30px; height: 30px; border-width: 0px 1px 1px 0px; transform: rotate(46deg) translate(-50%) skew(10deg, 10deg); transform-origin: left; border-style: solid; border-color: black; }
<div class="hairline-down-arrow"></div>
Hey i just make it for left direction you can do some little change to move in any direction.
.leftchat:after {
content: "";
position: absolute;
top: 6px;
left: -7px;
border-style: solid;
border-width: 5px 7px 5px 0;
border-color: transparent #fff;
display: block;
width: 0;
height:0
}
.leftchat:before{
content: "";
position: absolute;
top: 2px;
left: -12px;
border-style: solid;
border-width: 8px 11px 8px 0;
border-color: transparent #D1D2D4;
display: block;
width: 0;
height:0;
z-index: 0
}
I created a CSS only downarrow: http://jsfiddle.net/x3802ox3/
<div class="link">This is text with a downarrow<div class="arrow"></div></div>
.link {
position: relative;
display: inline-block;
padding-right: 27px;
font-size: 18px;
}
.arrow {
position: absolute;
right: 0;
top: 11px;
display: block;
width: 20px;
}
.arrow:before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 2px;
width: 12px;
background: #000000;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
transform: rotate(40deg);
}
.arrow:after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 2px;
width: 12px;
background: #000000;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
transform: rotate(-40deg);
}
Plain CSS
.arrow {
display: inline-block;
position: relative;
margin: 1em;
}
.arrow.thin.up {
border-top: 1px solid #fff;
border-left: 1px solid #fff;
height: 40px;
width: 40px;
transform: rotate(45deg);
}
.arrow.thin.left {
border-top: 1px solid #fff;
border-left: 1px solid #fff;
height: 40px;
width: 40px;
transform: rotate(135deg);
}
.arrow.thin.down {
border-top: 1px solid #fff;
border-left: 1px solid #fff;
height: 40px;
width: 40px;
transform: rotate(225deg);
}
.arrow.thin.right {
border-top: 1px solid #fff;
border-left: 1px solid #fff;
height: 40px;
width: 40px;
transform: rotate(315deg);
}
or as a SASS mixin
@mixin arrow($color, $direction: down, $size: 10px) {
border-top: 1px solid $color;
border-left: 1px solid $color;
height: $size;
width: $size;
@if $direction == 'up' {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)";
} @else if $direction == 'left' {
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
transform: rotate(135deg);
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11=-0.7071067811865475, M12=0.7071067811865476,M21=-0.7071067811865475,M22=0.7071067811865476);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=-0.7071067811865475, M12=0.7071067811865476,M21=-0.7071067811865475,M22=0.7071067811865476)";
} @else if $direction == 'down' {
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
transform: rotate(225deg);
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11=-0.7071067811865477, M12=-0.7071067811865475,M21=-0.7071067811865477,M22=-0.7071067811865475);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=-0.7071067811865477, M12=-0.7071067811865475,M21=-0.7071067811865477,M22=-0.7071067811865475)";
} @else if $direction == 'right' {
-webkit-transform: rotate(315deg);
-moz-transform: rotate(315deg);
transform: rotate(315deg);
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11=0.7071067811865474, M12=-0.7071067811865477,M21=0.7071067811865474,M22=-0.7071067811865477);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865474, M12=-0.7071067811865477,M21=0.7071067811865474,M22=-0.7071067811865477)";
}
}
body {
background: #000;
text-align: center;
padding: 5em;
}
.arrow {
display: inline-block;
position: relative;
margin: 1em;
}
.arrow.thin.up {
@include arrow($direction: up, $color: #fff, $size: 40px);
}
.arrow.thin.left {
@include arrow($direction: left, $color: #fff, $size: 40px);
}
.arrow.thin.down {
@include arrow($direction: down, $color: #fff, $size: 40px);
}
.arrow.thin.right {
@include arrow($direction: right, $color: #fff, $size: 40px);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.