i'm trying to create a double arrow in circle but i can create just one.
I tried to use before but nothing to do.
This is the code:
<div id="basso">
<a href="#" id="freccia">
<span id="bottom"></span>
</a>
</div>
Fiddle:
fiddle
I just used :before and copied the CSS you were using on the :after, only changing the margin-top and the position.
#basso
{
text-align: center;
display: inline-block;
vertical-align: middle;
}
#bottom
{
display: inline-block;
border-radius: 50%;
}
#freccia:hover #bottom
{
display: inline-block;
border-radius: 50%;
border: 0.15em solid #4183D7;
}
#freccia:hover #bottom:after
{
border-top: 0.15em solid #4183D7;
border-right: 0.15em solid #4183D7;
}
#bottom
{
display: inline-block;
width: 3em;
height: 3em;
border: 0.15em solid #333;
border-radius: 50%;
margin-left: 0.75em;
transition: all 0.1s ease-out;
}
#bottom:after
{
content: '';
display: inline-block;
margin-top: 0.6em;
width: 1.2em;
height: 1.2em;
border-top: 0.15em solid #333;
border-right: 0.15em solid #333;
-moz-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
transition: all 0.1s ease-out;
}
#bottom:before
{
position: absolute;
content: '';
display: inline-block;
margin-top: 0.3em;
width: 1.2em;
height: 1.2em;
border-top: 0.15em solid #333;
border-right: 0.15em solid #333;
-moz-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
transition: all 0.1s ease-out;
}
#bottom:hover:after
{
content: '';
display: inline-block;
margin-top: 0.9em;
width: 1.2em;
height: 1.2em;
border-top: 0.15em solid #4183D7;
border-right: 0.15em solid #4183D7;
-moz-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
#bottom:hover:before
{
content: '';
display: inline-block;
margin-top: 0.6em;
width: 1.2em;
height: 1.2em;
border-top: 0.15em solid #4183D7;
border-right: 0.15em solid #4183D7;
-moz-transform: rotate(135deg);
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
<div id="basso">
<a href="#" id="freccia">
<span id="bottom"></span>
</a>
</div>
Related
I'm trying to create a transition for both an div button and a pseudo element, but for some reason, these transitions appear to be out of sync with each other, resulting in the pseudo element reaching a background color before the div does. I've tried various combinations of style rules, but I never managed to accomplish an ease-in-out transition to work correctly.
.tracking__history {
display: flex;
justify-content: flex-start;
align-items: center;
}
.skew-btn-left {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 120px;
font-size: 20px;
color: #2E8DEF;
background: #0000;
border-top: 5px solid #13bcfa;
border-left: 5px solid #13bcfa;
border-bottom: 5px solid #13bcfa;
}
.skew-btn-left::after {
content: " ";
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
margin-top: -5px;
margin-left: -5px;
background: #0000;
border-top: 5px solid #13bcfa;
border-bottom: 5px solid #13bcfa;
border-right: 5px solid #13bcfa;
transform-origin: top left;
-ms-transform: skew(30deg, 0deg);
-webkit-transform: skew(30deg, 0deg);
transform: skew(30deg, 0deg);
transition: background 1s;
}
.skew-btn-right {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 120px;
margin-left: 40px;
font-size: 20px;
color: #13bcfa;
background: #0000;
border-top: 5px solid #13bcfa;
border-right: 5px solid #13bcfa;
border-bottom: 5px solid #13bcfa;
transition: all .5s;
}
.skew-btn-right::after {
content: " ";
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
margin-top: -5px;
margin-left: -5px;
background: #0000;
border-top: 5px solid #13bcfa;
border-bottom: 5px solid #13bcfa;
border-left: 5px solid #13bcfa;
transform-origin: bottom left;
-ms-transform: skew(30deg, 0deg);
-webkit-transform: skew(30deg, 0deg);
transform: skew(30deg, 0deg);
}
div.skew-btn-right:hover,
div.skew-btn-left:hover,
div.skew-btn-right:hover.skew-btn-right::after,
div.skew-btn-left:hover.skew-btn-left::after {
background: #13bcfa;
}
.skew-btn-left a, .skew-btn-right a {
display: flex;
justify-content: center;
align-items: center;
padding: 5px 0px;
text-decoration: none;
color: #13bcfa;
text-transform: uppercase;
}
.skew-btn-left:hover a, .skew-btn-right:hover a {
color: #fff;
}
<div class="tracking__history">
<div class="skew-btn-left">
Tracking
</div>
<div class="skew-btn-right">
History
</div>
</div>
You're transitioning at different speeds, you're also transitioning all attributes which in this case involves things you aren't trying to transition on the pseudo-elements so they're lagging. Sync up your transitions and specify that you're targeting the color and background attributes and you should be good. I simplified your code a bit and if you don't want to transition the text color you can just remove it from the transition.
.tracking__history {
display: flex;
justify-content: flex-start;
align-items: center;
}
.skew-btn-left {
display: flex;
justify-content: center;
align-items: center;
padding: 5px 0px;
text-decoration: none;
color: #13bcfa;
text-transform: uppercase;
position: relative;
width: 120px;
font-size: 20px;
background: white;
border-top: 5px solid #13bcfa;
border-left: 5px solid #13bcfa;
border-bottom: 5px solid #13bcfa;
transition: background 0.5s linear, color 0.5s linear;
}
.skew-btn-left::after {
content: "";
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
margin-top: -5px;
margin-left: -2px;
background: white;
color: white;
border-top: 5px solid #13bcfa;
border-bottom: 5px solid #13bcfa;
border-right: 5px solid #13bcfa;
transform-origin: top left;
-ms-transform: skew(30deg, 0deg);
-webkit-transform: skew(30deg, 0deg);
transform: skew(30deg, 0deg);
transition: background 0.5s linear, color 0.5s linear;
}
.skew-btn-right {
display: flex;
justify-content: center;
align-items: center;
padding: 5px 0px;
text-decoration: none;
color: #13bcfa;
text-transform: uppercase;
position: relative;
width: 120px;
margin-left: 40px;
font-size: 20px;
background: white;
border-top: 5px solid #13bcfa;
border-right: 5px solid #13bcfa;
border-bottom: 5px solid #13bcfa;
transition: background 0.5s linear, color 0.5s linear;
}
.skew-btn-right::after {
content: "";
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
margin-top: -5px;
margin-left: -5px;
background: white;
color: white;
border-top: 5px solid #13bcfa;
border-bottom: 5px solid #13bcfa;
border-left: 5px solid #13bcfa;
transform-origin: bottom left;
-ms-transform: skew(30deg, 0deg);
-webkit-transform: skew(30deg, 0deg);
transform: skew(30deg, 0deg);
transition: background 0.5s linear, color 0.5s linear;
}
.skew-btn-right:hover,
.skew-btn-left:hover,
.skew-btn-right:hover.skew-btn-right::after,
.skew-btn-left:hover.skew-btn-left::after {
background: #13bcfa;
color: white;
transition: background 0.5s linear, color 0.5s linear;
}
<div class="tracking__history">
<a class="skew-btn-left" href="">Tracking</a>
<a class="skew-btn-right" href="">History</a>
</div>
Here is another idea with less of code:
.tracking__history {
display: flex;
}
.tracking__history a {
padding: 10px;
position: relative;
z-index: 0;
font-size: 20px;
color: #13bcfa;
text-transform: uppercase;
text-decoration: none;
overflow: hidden;
transition: .2s;
}
.tracking__history a:hover {
color: #fff;
}
.tracking__history a:before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border: 5px solid #13bcfa;
transform: skewX(25deg); /* control the curvature here */
transition: inherit;
}
.tracking__history a:hover:before {
background: #13bcfa;
}
.tracking__history a:first-child {
padding-right: 30px;
margin-right: -5px;
border-left: 5px solid #13bcfa;
}
.tracking__history a:last-child {
padding-left: 30px;
margin-left: -5px;
border-right: 5px solid #13bcfa;
}
.tracking__history a:first-child:before {
border-left: none;
transform-origin: bottom;
}
.tracking__history a:last-child:before {
border-right: none;
transform-origin: top;
}
<div class="tracking__history">
Tracking
History
</div>
I tried with your buttons, but couldn't. Maybe you'll find these button as a good alternative (needs customizing). From How do I create a trapezoidal button using CSS? and CSS Trapezoid Button With Solid Border
.trapezoid {
width: 230px;
text-align: center;
height: 0;
position: relative;
border-right: 50px solid transparent;
border-top: 40px solid #2963BD;
border-left: 50px solid transparent;
box-sizing: content-box;
transition: all 1s;
}
.trapezoid span {
position: absolute;
top: -30px;
left: 25%;
color: #fff;
}
.trapezoid:hover {
border-top-color: red;
}
.btn {
width: 100px;
height: 50px;
background: red;
float: left;
transition: all 1s;
color: white;
}
.rit {
float: left;
width: 0;
height: 0;
border-top: 50px solid red;
border-right: 100px solid transparent;
transition: all 1s;
}
.wrapper:hover .btn {
background: blue;
}
.wrapper:hover .rit {
border-top-color: blue;
}
button 1:
<div class="trapezoid"><span>Trapezoid Button</span></div>
<hr> button 2:
<span class="wrapper">
<div class="btn">Content</div>
<div class="rit"></div>
</span>
Help me, how to switch the initial toggle button condition from day to night?
/*
F5EB42 - sun inner
E4C74D - sun outer
FFFFFF - cloud inner
D4D4D2 - cloud outer
81C0D5 - parent outer
C0E6F6 - parent inner
FFFDF2 - moon inner
DEE1C5 - moon outer
FCFCFC - stars
*/
body {
background-color: #F3F3F3;
}
.wrapper {
padding-top: 40px;
text-align: center;
}
.toggle {
position: relative;
display: inline-block;
width: 100px;
margin-left: 100px;
padding: 4px;
border-radius: 40px;
}
.toggle:before,
.toggle:after {
content: '';
display: table;
}
.toggle:after {
clear: both;
}
.toggle-bg {
position: absolute;
top: -4px;
left: -4px;
width: 100%;
height: 100%;
background-color: #C0E6F6;
border-radius: 40px;
border: 4px solid #81C0D5;
transition: all 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.toggle-input {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 1px solid red;
border-radius: 40px;
z-index: 2;
opacity: 0;
}
.toggle-switch {
position: relative;
width: 40px;
height: 40px;
margin-left: 50px;
background-color: #F5EB42;
border: 4px solid #E4C74D;
border-radius: 50%;
transition: all 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.toggle-switch-figure {
position: absolute;
bottom: -14px;
left: -50px;
display: block;
width: 80px;
height: 30px;
border: 8px solid #D4D4D2;
border-radius: 20px;
background-color: #fff;
-webkit-transform: scale(0.4);
transform: scale(0.4);
transition: all 0.12s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.toggle-switch-figure:after {
content: '';
display: block;
position: relative;
top: -65px;
right: -42px;
width: 15px;
height: 15px;
border: 8px solid #D4D4D2;
border-radius: 100%;
border-right-color: transparent;
border-bottom-color: transparent;
-webkit-transform: rotateZ(70deg);
transform: rotateZ(70deg);
background-color: #fff;
}
.toggle-switch-figure:before {
content: '';
display: block;
position: relative;
top: -25px;
right: -10px;
width: 30px;
height: 30px;
border: 8px solid #D4D4D2;
border-radius: 100%;
border-right-color: transparent;
border-bottom-color: transparent;
-webkit-transform: rotateZ(30deg);
transform: rotateZ(30deg);
background-color: #fff;
}
.toggle-switch-figureAlt {
content: '';
position: absolute;
top: 5px;
left: 2px;
width: 2px;
height: 2px;
background-color: #EFEEDA;
border-radius: 100%;
border: 4px solid #DEE1C5;
box-shadow: 42px -7px 0 -3px #FCFCFC, 75px -10px 0 -3px #FCFCFC, 54px 4px 0 -4px #FCFCFC, 83px 7px 0 -2px #FCFCFC, 63px 18px 0 -4px #FCFCFC, 44px 28px 0 -2px #FCFCFC, 78px 23px 0 -3px #FCFCFC;
transition: all 0.12s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-webkit-transform: scale(0);
transform: scale(0);
}
.toggle-switch-figureAlt:before {
content: '';
position: absolute;
top: -6px;
left: 18px;
width: 7px;
height: 7px;
background-color: #EFEEDA;
border-radius: 100%;
border: 4px solid #DEE1C5;
}
.toggle-switch-figureAlt:after {
content: '';
position: absolute;
top: 19px;
left: 15px;
width: 2px;
height: 2px;
background-color: #EFEEDA;
border-radius: 100%;
border: 4px solid #DEE1C5;
}
.toggle-input:checked ~ .toggle-switch {
margin-left: 0;
border-color: #DEE1C5;
background-color: #FFFDF2;
}
.toggle-input:checked ~ .toggle-bg {
background-color: #484848;
border-color: #202020;
}
.toggle-input:checked ~ .toggle-switch .toggle-switch-figure {
margin-left: 40px;
opacity: 0;
-webkit-transform: scale(0.1);
transform: scale(0.1);
}
.toggle-input:checked ~ .toggle-switch .toggle-switch-figureAlt {
-webkit-transform: scale(1);
transform: scale(1);
}
<div class="wrapper">
<div class="toggle">
<input class="toggle-input" type="checkbox" />
<div class="toggle-bg"></div>
<div class="toggle-switch">
<div class="toggle-switch-figure"></div>
<div class="toggle-switch-figureAlt"></div>
</div>
</div>
</div>
should I change "before" and "after" in some cases? or...
Just add the checked attribute to input
<input checked class="toggle-input" type="checkbox" />
change the input tag and set the checked attribute to false. It will work then. Always better to use the checked attribute of the input when you are defining the initial behavior of the component
<input class="toggle-input" type="checkbox" checked="false"/>
I've a div and I need a border with the left side oblique, but I'm finding only solutions that have the element filled with color.
I need only the border, like this picture:
How can I do this?
My actual code:
HTML
<div class="arrow">
<span id="time">30 mins</span>
<img src="assets/up_arrow.png" />
</div>
CSS
.arrow {
display: inline-block;
text-align: right;
text-decoration: none;
margin-left: 35%;
padding: 5px 0 5px 0;
border-style: solid;
border-width: 1px 0 1px 0;
border-color: #929A9D transparent #929A9D transparent;
}
.arrow > img {
vertical-align: middle;
width: 12px;
height: 12px;
}
TRY THIS DEMO
HTML & CSS
#a {
position: relative;
width: 120px;
padding: 10px 20px;
font-size: 20px;
position: relative;
margin-left:50px;
color: #2E8DEF;
border: 3px solid #2E8DEF;
border-left:0;
}
#a:before {
content: " ";
position: absolute;
display: block;
width: 50%;
height: 100%;
top: -3px;
left: -30px;
z-index: -1;
border:3px solid #2E8DEF;
border-right: 0px;
transform-origin: bottom left;
-ms-transform: skew(-30deg, 0deg);
-webkit-transform: skew(-30deg, 0deg);
transform: skew(-30deg, 0deg);
}
<div id="a">
Hello
</div>
I have created the shape using border and before pseudo element. Hope this will help.
.ClassicBorder {
width: 200px;
padding: 4px 0;
border: 2px solid #999;
position: relative;
margin-left: 9px;
text-align: center;
font-size: 25px;
}
.ClassicBorder:before {
height: 36px;
width: 40px;
border: 2px solid #999;
content: '';
position: absolute;
border-right: 0px;
border-top: 0px;
transform: skew(340deg);
-webkit-transform: skew(340deg);
-moz-transform: skew(340deg);
background: #fff;
left: -9px;
top:0px;
}
<div class="ClassicBorder">
30 Mins >
</div>
I found a more elegant way, that's more easier to maintain, based on this answer: https://stackoverflow.com/a/24691352/5287860.
New code:
.row {
display: block;
overflow: hidden;
background: linear-gradient(to right, #fff, transparent, #fff, #fff);
}
.arrow {
display: inline-block;
text-align: center;
text-decoration: none;
padding: 5px 0 5px 5px;
border-style: solid;
border-width: 1px 0px 1px 1px;
border-color: #929A9D transparent #929A9D #929A9D;
transform: skewX(-20deg);
-ms-transform: skewX(-20deg);
-webkit-transform: skewX(-20deg);
width: 100px;
}
.arrow > div {
display: inline-block;
text-decoration: none;
transform: skewX(20deg);
-ms-transform: skewX(20deg);
-webkit-transform: skewX(20deg);
}
.arrow > img {
vertical-align: middle;
width: 12px;
height: 12px;
text-decoration: none;
transform: skewX(20deg);
-ms-transform: skewX(20deg);
-webkit-transform: skewX(20deg);
}
<div class="row">
<div class="arrow">
<div><span id="">30 mins</span></div>
<img src="assets/up_arrow.png" />
</div>
</div>
How to draw 1/2 or 1/4 "equal" line width circle with css ?
(not svg)
the whole line not equal width how to fix it
https://jsfiddle.net/ryxq1e91/
.circle {
position: relative;
display: inline-block;
width: 40px;
height: 40px;
background-color: red;
}
.circle >div {
top: 11px;
left: 14px;
}
.circle >div {
position: relative;
width: 12px;
height: 12px;
border-bottom-right: 1px solid rgba(40,40,40,1);
border-bottom: 1px solid rgba(40,40,40,1);
border-bottom-left: 1px solid rgba(40,40,40,1);
border-radius: 8px;
}
<div class="circle">
<div></div>
</div>
As another option if you want to keep the full div, just make the borders that you don't want transparent. The only caveat is that it will appear 45 degrees rotated, so just transform it with a transform: rotate(45deg).
Note that I'm unsure what the support for this is.
1/4 Circle
.circle {
position: relative;
display: inline-block;
width: 120px;
height: 120px;
background-color: red;
}
.circle >div {
top: 10px;
left: 10px;
}
.circle >div {
position: relative;
width: 100px;
height: 100px;
border-right: 1px solid transparent;
border-bottom: 1px solid rgba(40,40,40,1);
border-left: 1px solid transparent;
border-top: 1px solid transparent;
border-radius: 50px;
transform: rotate(45deg);
}
<div class="circle">
<div></div>
</div>
1/2 Circle
.circle {
position: relative;
display: inline-block;
width: 120px;
height: 120px;
background-color: red;
}
.circle >div {
top: 10px;
left: 10px;
}
.circle >div {
position: relative;
width: 100px;
height: 100px;
border-right: 1px solid rgba(40,40,40,1);
border-bottom: 1px solid rgba(40,40,40,1);
border-left: 1px solid transparent;
border-top: 1px solid transparent;
border-radius: 50px;
transform: rotate(45deg);
}
<div class="circle">
<div></div>
</div>
You can use border-top-left-radius and border-top-right-radius properties to round the corners on the box according to the box's height (and added borders).
Then add a border to top/right/left sides of the box to achieve the effect.
1 / 2 Circle
.half-circle {
width: 200px;
height: 100px;
background-color: skyblue;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
border: 10px solid gray;
border-bottom: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
<div class="half-circle"></div>
1 / 4 Circle
.half-circle {
width: 100px;
height: 100px;
background-color: skyblue;
border-top-left-radius: 100px;
border: 10px solid gray;
border-right: 0;
border-bottom: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
<div class="half-circle"></div>
Here you go:
https://jsfiddle.net/3ozvfgnr/
A full circle with border and border-radius that is overlayed by elements that cut off the parts you don't want and which have the same background color.
<div class="circle">
<div class="overlay1"></div>
<div class="circlebasis"></div>
</div>
<div class="circle">
<div class="overlay2"></div>
<div class="overlay3"></div>
<div class="circlebasis"></div>
</div>
.circle {
position: relative;
width: 80px;
height: 80px;
background-color: red;
margin-bottom:5px;
}
.circlebasis {
box-sizing: border-box;
top: 18px;
left: 18px;
position: relative;
width: 40px;
height: 40px;
border: 2px solid rgba(40,40,40,1);
border-radius: 22px;
}
.overlay1 {
box-sizing: border-box;
position:absolute;
width: 80px;
height: 40px;
border: none;
background-color: red;
z-index:1;
}
.overlay2 {
box-sizing: border-box;
position:absolute;
width: 80px;
height: 40px;
border: none;
background-color: red;
z-index:1;
}
.overlay3 {
box-sizing: border-box;
position: absolute;
top: 0px;
right: 0px;
width: 40px;
height: 80px;
border: none;
background-color: red;
z-index: 1;
}
Does this help??
.circle {
border-radius: 90px 90px 0 0;
-moz-border-radius: 90px 90px 0 0;
-webkit-border-radius: 90px 90px 0 0;
height:45px;
width:90px;
margin-top:0px;
border:2px solid black;
border-bottom:none;
}
.quarter-circle {
height:45px;
width: 45px;
-moz-border-radius: 150px 0 0 0;
border-radius: 150px 0 0 0;
border:2px solid black;
border-bottom:none;
border-right:none;
}
<div class="circle"></div>
<div class="quarter-circle"></div>
I decided it would be fun to turn this into a loading icon.
.quarter-circle {
height:45px;
width: 45px;
-moz-border-radius: 150px 0 0 0;
border-radius: 150px 0 0 0;
border:2px solid rgba(0,0,200,.5);
border-bottom:none;
border-right:none;
}
#-webkit-keyframes rotating /* Safari and Chrome */ {
from {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes rotating {
from {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.rotating {
-webkit-animation: rotating 2s linear infinite;
-moz-animation: rotating 2s linear infinite;
-ms-animation: rotating 2s linear infinite;
-o-animation: rotating 2s linear infinite;
animation: rotating 2s linear infinite;
}
<div class="rotating" style="width:90px;height:90px;"><div class="quarter-circle"></div></div>
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.
Fiddle
.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);
}
Live demo
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);
}