I have text that is rotated 90 degrees, which sits in a vertical tab that is in a fixed position. The tab is for a Contact Us link. The issue I cannot resolve is that the text breaks line. It looks like this.
Contact
Us
I have tried text-align, vertical-align, display, messing with margins and padding, and width. Nothing seems to work. Has anyone else had this issue? How were you able to resolve it? Code below.
CSS
#followTab {
list-style: none;
position: fixed;
text-indent:initial;
z-index: 1;
right: 0;
top: 130px;
line-height:20px;
width: 35px;
padding: 80px 10px;
border: 3px solid #fff;
border-right: none;
-moz-border-radius: 10px 0 0 10px;
-webkit-border-radius: 10px 0 0 10px;
border-radius: 10px 0 0 10px;
-moz-box-shadow: 0 0 7px rgba(0, 0, 0, .6);
-webkit-box-shadow: 0 0 7px rgba(0, 0, 0, .6);
box-shadow: 0 0 7px rgba(0, 0, 0, .6);
background: rgba(239, 91, 10, .75);
background: -moz-linear-gradient(top, rgba(243, 52, 8, .75), rgba(239, 91, 10, .75));
background: -webkit-gradient( linear, left top, left bottom, from( rgba(243, 52, 8, .75) ), to( rgba(239, 91, 10, .75) ) );
background: linear-gradient(top, rgba(243, 52, 8, .75), rgba(239, 91, 10, .75));
filter: progid:DXImageTransform.Microsoft.Gradient( startColorStr='#c0f33408', endColorStr='#c0ef5b0a', GradientType=0 );
}
.rotate {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(-90deg);
/* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */
-webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
transform-origin: 50% 50%;
/* Should be unset in IE9+ I think. */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
HTML
<ul id="followTab">
<li class="rotate"><a>Contact Us</a></li>
</ul>
http://jsfiddle.net/8Vkmm/
<ul id="followTab">
<li class="rotate"><a>Contact Us</a></li>
</ul>
http://jsfiddle.net/9ZJJz/
As Chris says, loose the width on the UL and it all works: http://jsfiddle.net/8Vkmm/1/
/*width: 35px;*/
You need the following CSS:
#followTab { white-space: nowrap; }
Related
I'm trying to create a round directional arrow with CSS and HTML. Below are my attempts.
Attempt 1
In this I have rotated the <div> and an arrow, but both are in different positions.
This is the CSS:
#curves div {
width: 100px;
height: 100px;
border: 5px solid #999;
}
#curves.width div {
border-color: transparent transparent transparent #999;
}
#curve1 {
-moz-border-radius: 50px 0 0 50px;
border-radius: 50px 0 0 50px;
}
.arrow-right {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 27px solid #ccc;
float: right;
margin-top: -7px;
margin-right: -26px;
}
<div id="curves" class="width">
<div id="curve1"></div><span class="arrow-right"></span>
</div>
Attempt 2
In this the arrow I have created is straight.
.container {
width: 60%;
height: 9px;
background: #ccc;
margin: 100px auto;
-moz-border-radius: 50px 0 0 50px;
border-radius: 50px 0 0 50px;
}
.arrow-right {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 27px solid #ccc;
float: right;
margin-top: -7px;
margin-right: -26px;
}
<div class="container">
</span><span class="arrow-right"></span>
</div>
Update
I want it something like this
You could use a pseudo element to generate the triangle (using the famous border hack).
After that, you would be able to use a thick border on the actual element (with a border-radius of 50% to make it a circle). This allows you to rotate the arrow to your liking.
div {
border: 20px solid transparent;
border-top-color: black;
border-left-color: black;
height: 100px;
width: 100px;
border-radius: 50%;
position: relative;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
margin:30px auto;
}
div:before {
content: "";
position: absolute;
top: -20px;
left: 80%;
height: 0;
width: 0;
border-left: 30px solid black;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
/*BELOW IS FOR DEMO ONLY*/
div:hover {
-webkit-transform: rotate(315deg);
-ms-transform: rotate(315deg);
transform: rotate(315deg);
transition: all 0.8s;
}
html {
text-align:center;
color:white;
font-size:30px;
height: 100%;
background: rgb(79, 79, 79);
/* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
/* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(79, 79, 79, 1)), color-stop(100%, rgba(34, 34, 34, 1)));
/* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
/* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
/* IE10+ */
background: radial-gradient(ellipse at center, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
/* W3C */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f', endColorstr='#222222', GradientType=1);
/* IE6-9 fallback on horizontal gradient */
}
HOVER ME
<div></div>
If you then wanted to lengthen the arrow, you could make the bottom border visible. For example;
div {
border: 20px solid transparent;
border-top-color: black;
border-left-color: black;
border-bottom-color: black;
height: 100px;
width: 100px;
border-radius: 50%;
position: relative;
transform: rotate(-45deg);
margin:30px auto;
}
div:before {
content: "";
position: absolute;
top: -20px;
left: 80%;
height: 0;
width: 0;
border-left: 30px solid black;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
transform: rotate(45deg);
}
/*BELOW IS FOR DEMO ONLY*/
div:hover {
transform: rotate(315deg);
transition: all 0.8s;
}
html {
text-align:center;
color:white;
font-size:30px;
height: 100%;
background: rgb(79, 79, 79);
/* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
/* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(79, 79, 79, 1)), color-stop(100%, rgba(34, 34, 34, 1)));
/* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
/* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
/* IE10+ */
background: radial-gradient(ellipse at center, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
/* W3C */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f', endColorstr='#222222', GradientType=1);
/* IE6-9 fallback on horizontal gradient */
}
HOVER ME
<div></div>
SVG solution
The shape is really simple to create in SVG.
For the svg interested:
<svg width="200px" height="200px" viewbox="0 0 400 400">
<path stroke="#000" stroke-width="50" fill="none"
d="M200 350 A 100 100 0 0 1 200 150
M200 150 200 125 225 150 200 175Z"/>
</svg>
Can i use it?
I have created this little thing in CSS, you can look at the code to see how it works.
Note: this does need a solid background.
.arrow {
width: 200px;
height: 200px;
border: 6px solid;
border-radius: 50%;
position: relative;
}
.arrow:before {
content: "";
display: block;
width: 10px;
height: 50px;
background: #fff;
position: absolute;
bottom: 0;
top: 0;
right: -6px;
margin: auto;
}
.arrow:after {
content: "";
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #000;
position: absolute;
bottom: 106px;
right: -20px;
}
<div class="arrow"></div>
Here's another way to do it using clip-paths instead of messing around with borders.
Demo - http://jsfiddle.net/r8rd0yde/4/
.arrow {
position: relative;
padding: 20px;
width: 100px;
height: 100px;
}
.circle {
position: absolute;
box-sizing: border-box;
height: 100px;
width: 100px;
border: 15px solid #000;
border-radius: 50%;
-webkit-clip-path: inset(0 50% 0 0);
clip-path: inset(0 50% 0 0);
}
.triangle {
position: absolute;
width: 35px;
height: 30px;
background: #000;
margin-top: -6px;
margin-left: 38px;
-webkit-clip-path: polygon(50% 0, 0% 100%, 100% 100%);
clip-path: polygon(50% 0, 0% 100%, 100% 100%);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
/* JUST FOR DEMO */
.arrow:hover {
-webkit-transform: rotate(720deg);
-ms-transform: rotate(720deg);
transform: rotate(720deg);
transition: all 1.2s;
}
<div class="arrow">
<div class="circle"></div>
<div class="triangle"></div>
</div>
You can use the Clockwise open circle arrow (U+21BB) character: ↻
.arrow {
display: inline-block;
font-size: 300px;
line-height: 200px;
font-weight: bold;
transform: rotate(90deg);
}
<span class="arrow">↻</span>
#curvedarrow {
position: relative;
width: 0;
height: 0;
border-top: 9px solid transparent;
border-right: 9px solid red;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-ms-transform: rotate(10deg);
-o-transform: rotate(10deg);
}
#curvedarrow:after {
content: "";
position: absolute;
border: 0 solid transparent;
border-top: 3px solid red;
border-radius: 20px 0 0 0;
top: -12px;
left: -9px;
width: 12px;
height: 12px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
I found this in
https://css-tricks.com/examples/ShapesOfCSS/
It may not be the exact shape you want but it's definately a good starting point.
I am making a ticker animation on my site.
This is the HTML:
<div class="top-news">
<div class="t-n-c">
<div class="textwidget">Latest News: Our first 20 customers get 20% off their first order! Order now with the coupon 20FOR20 to use this offer!
</div>
</div>
</div>
And this is the CSS:
.top-news{
color: white;
-webkit-font-smoothing: subpixel-antialiased;
font-weight: bold;
text-shadow: 0 1px 0 #ac8b00;
background-color: #f0cf31;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f0cf31), to(#bd9c00));
background-image: -webkit-linear-gradient(top, #f0cf31, #bd9c00);
background-image: -moz-linear-gradient(top, #f0cf31, #bd9c00);
background-image: -ms-linear-gradient(top, #f0cf31, #bd9c00);
background-image: -o-linear-gradient(top, #f0cf31, #bd9c00);
background-image: linear-gradient(to bottom, #f0cf31, #bd9c00);
border: 1px solid #9b7a00;
-webkit-border-radius: 0.202em;
border-radius: 0.202em;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
-webkit-box-shadow: 0 0 0 0.327em rgba(0, 0, 0, 0.075), 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 1px #fff153, inset 0 -1px #ac8b00;
box-shadow: 0 0 0 0.327em rgba(0, 0, 0, 0.075), 0 1px 2px rgba(0, 0, 0, 0.2), inset 0 1px #fff153, inset 0 -1px #ac8b00;
padding: 10px;
overflow: hidden;
white-space: nowrap;
padding-left: 100%;
}
.top-news > .t-n-c{
padding-right: 100%;
}
.top-news > .t-n-c > .textwidget{
display: inline-block;
animation-name: ticker;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-duration: 35s;
}
.top-news:hover > .t-n-c > .textwidget{
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
-o-animation-play-state: paused;
animation-play-state: paused;
}
#keyframes ticker {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
}
}
However the result is that the text isn't going all the way to the left on my laptop. It is working fine on my iPhone, probably because the screen is smaller but if you check the live demo at: https://codepen.io/anon/pen/RRGvgG you will see that it isn't working properly on laptops.
It looks like it isn't finishing because the text finished. How can I make it so it keeps scrolling even after there is no more text?
It stops because it reaches 100% when all the text is shown. I changed
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0);
to
-webkit-transform: translate3d(-250%, 0, 0);
transform: translate3d(-250%, 0, 0);
and it works.
The way that translate3d works is that the percentage specified is based on the actual element's width, not the width of its container like you might expect. Therefore, if the screen is less than the width of the ticker (which is 800px, or so), it appears to be skipping back to the beginning.
You will need to increase the percentage high enough that it will always make a full rotation on all screens and slow it down. This will make the loop inaccurate, so that's something to consider. I increased the animation duration to account for the greater distance animated. See this updated codepen:
https://codepen.io/thecox/pen/pbEGVQ
.top-news > .t-n-c > .textwidget{
animation-duration: 45s;
}
#keyframes ticker {
0% {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
100% {
-webkit-transform: translate3d(-300%, 0, 0);
transform: translate3d(-300%, 0, 0);
}
}
i have here a problem that i never seen before. i build a header with an menu icon on the left side and three icons on the right side of it. Two of the three icons on the right side, have badges. The problem is that the badges are looking perfect on safari, firefox, edge etc. but on chrome are they to much left. if i change now the margin from margin: 0 0 0 -8px to margin: 0 0 0 11px is it looking good on chrome, but in all other browser is it to much right. How can it be that a margin looks different? Never seen it before.
.pulse-badge {
background: rgba(51,51,51, 0.87); ;
border-radius: 50%;
min-height: 1.3rem;
margin: 0 0 0 -8px;
position: absolute;
min-width: 1.3rem;
top: 0.8em;
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51,51,51, .051);
transform: translate3d(0, 0, 0);
animation: pulse 1.25s infinite cubic-bezier(0.66, 0.33, 0, 1);}
#keyframes pulse {
to {
box-shadow: 0 0 0 12px transparent, 0 0 0 16px rgba(90, 153, 212, 0);
}
}
thats the css of the badges and im using skeleton as framework. I also have here a jsfiddle where ya can see it, if ya change the margin. and here is a link with the live project if ya whant to see it with the other content if it helps live
Try to use right than margin: then position your list to relative
Check this out https://jsfiddle.net/febg4cuo/3/
Edited:
you need to add position relative to your list
.notification-bar> li{position:relative;}
You can position the badges absolutely and just add position: relative; to the <li> elements. This together with fiddling with the top and right css attributes solves the problem.
This is the part of css I modified:
.notification-bar> li {
position: relative; // Add this so the badges keep inside the li element
cursor: pointer;
display: table-cell;
padding: 19px 20px 15px 20px;
margin-bottom: 0;
}
.notification-bar>li:hover {
background-color: rgba(241, 241, 241, 0.7);
transition: background-color 0.6s ease;
}
.pulse-badge {
background: rgba(51, 51, 51, 0.87);
;
border-radius: 50%;
min-height: 1.3rem;
margin: 0;
position: absolute;
min-width: 1.3rem;
top: 1em; // Edit this a little to place it where you wanted
right: 1.1em; // Add this so the badges will be aligned on the right side of the icon
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, .051);
transform: translate3d(0, 0, 0);
animation: pulse 1.25s infinite cubic-bezier(0.66, 0.33, 0, 1);
}
Here is a working fiddle: https://jsfiddle.net/mz2m2qc1/1/
The problem with your code is you use margin instead of right position remove margin and use right position and every thing will be fine. Check Demo
I was working on this website, which uses bootstrap. On it there are circle-shaped images and when the mouse hovers I want to create an effect of that picture as creating a color light. For that, I used box-shadow because shadows wouldn't interfere within the image. The code looks like this:
HTML:
<div class="col-sm-3" id="af">
<br/><br/><br/>
<center>
<img src="OnePicture.jpg" class="img-circle smallpic"/>
</center>
<!-- The div continues with text -->
</div>
CSS:
.smallpic{
max-width:100px;
max-height: 100px;
border: 3px solid transparent;
/*Trying to force GPU Acceleration*/
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-transition: all 1s;
-webkit-transition-timing-function: ease;
transition: all 1s;
transition-timing-function: ease;
}
#af:hover .smallpic{
border: 3px solid #E3000E;
-webkit-transform: translate3d(0,0,0);
-moz-box-shadow: 0 0 500px 100px #E3000E;
-webkit-box-shadow: 0 0 500px 100px #E3000E;
box-shadow: 0 0 500px 100px #E3000E;
}
This code did exactly what I want, but due to a Webkit bug, it won't work properly on any Webkit based browser, which includes the popular Google Chrome.
Here is the result in Google Chrome: link
In my tests, the code worked really well in Mozilla Firefox, Microsoft Edge and also Internet Explorer. But Google Chrome, Vivaldi and other webkit based browsers tested got the same buggy look. Is there another way to make that effect work in all browsers besides box-shadow usage?
But it is still possible to have the same behaviour in all browsers. You need just to modify your HTML and CSS.
Here the example HTML
<div class="wrapper red">
<div class="image"></div>
<h2>Red</h2>
</div>
<div class="wrapper blue">
<div class="image"></div>
<h2>Blue</h2>
</div>
<div class="wrapper green">
<div class="image"></div>
<h2>Green</h2>
</div>
Here the example CSS:
.wrapper {
display: inline-block;
position: relative;
width: 300px;
height: 300px;
}
.wrapper:before {
position: absolute;
content: ' ';
z-index: -1;
top: 0;
left: 0;
bottom: 0;
right: 0;
transition: all 2s;
}
.blue:before {
background: radial-gradient(ellipse at center, rgba(0, 0, 255, .7) 10%, rgba(0, 0, 255, 0) 70%);
opacity: 0;
}
.red:before {
background: radial-gradient(ellipse at center, rgba(255, 0, 0, .7) 10%, rgba(255, 0, 0, 0) 70%);
opacity: 0;
}
.green:before {
background: radial-gradient(ellipse at center, rgba(0, 255, 0, .7) 10%, rgba(0, 255, 0, 0) 70%);
opacity: 0;
}
.wrapper:hover:before {
opacity: 1;
}
.image {
margin: 100px auto 0;
border: 4px solid red;
border-radius: 50%;
width: 100px;
height: 100px;
}
.green .image {
border-color: rgb(0, 255, 0);
background-color: rgba(0, 255, 0, .3);
}
.red .image {
border-color: rgb(255, 0, 0);
background-color: rgba(255, 0, 0, .3);
}
.blue .image {
border-color: rgb(0, 0, 255);
background-color: rgba(0, 0, 255, .3);
}
h2 {
text-align: center;
}
Here a live demo
I'm trying to create a round directional arrow with CSS and HTML. Below are my attempts.
Attempt 1
In this I have rotated the <div> and an arrow, but both are in different positions.
This is the CSS:
#curves div {
width: 100px;
height: 100px;
border: 5px solid #999;
}
#curves.width div {
border-color: transparent transparent transparent #999;
}
#curve1 {
-moz-border-radius: 50px 0 0 50px;
border-radius: 50px 0 0 50px;
}
.arrow-right {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 27px solid #ccc;
float: right;
margin-top: -7px;
margin-right: -26px;
}
<div id="curves" class="width">
<div id="curve1"></div><span class="arrow-right"></span>
</div>
Attempt 2
In this the arrow I have created is straight.
.container {
width: 60%;
height: 9px;
background: #ccc;
margin: 100px auto;
-moz-border-radius: 50px 0 0 50px;
border-radius: 50px 0 0 50px;
}
.arrow-right {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 27px solid #ccc;
float: right;
margin-top: -7px;
margin-right: -26px;
}
<div class="container">
</span><span class="arrow-right"></span>
</div>
Update
I want it something like this
You could use a pseudo element to generate the triangle (using the famous border hack).
After that, you would be able to use a thick border on the actual element (with a border-radius of 50% to make it a circle). This allows you to rotate the arrow to your liking.
div {
border: 20px solid transparent;
border-top-color: black;
border-left-color: black;
height: 100px;
width: 100px;
border-radius: 50%;
position: relative;
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
margin:30px auto;
}
div:before {
content: "";
position: absolute;
top: -20px;
left: 80%;
height: 0;
width: 0;
border-left: 30px solid black;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
/*BELOW IS FOR DEMO ONLY*/
div:hover {
-webkit-transform: rotate(315deg);
-ms-transform: rotate(315deg);
transform: rotate(315deg);
transition: all 0.8s;
}
html {
text-align:center;
color:white;
font-size:30px;
height: 100%;
background: rgb(79, 79, 79);
/* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
/* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(79, 79, 79, 1)), color-stop(100%, rgba(34, 34, 34, 1)));
/* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
/* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
/* IE10+ */
background: radial-gradient(ellipse at center, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
/* W3C */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f', endColorstr='#222222', GradientType=1);
/* IE6-9 fallback on horizontal gradient */
}
HOVER ME
<div></div>
If you then wanted to lengthen the arrow, you could make the bottom border visible. For example;
div {
border: 20px solid transparent;
border-top-color: black;
border-left-color: black;
border-bottom-color: black;
height: 100px;
width: 100px;
border-radius: 50%;
position: relative;
transform: rotate(-45deg);
margin:30px auto;
}
div:before {
content: "";
position: absolute;
top: -20px;
left: 80%;
height: 0;
width: 0;
border-left: 30px solid black;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
transform: rotate(45deg);
}
/*BELOW IS FOR DEMO ONLY*/
div:hover {
transform: rotate(315deg);
transition: all 0.8s;
}
html {
text-align:center;
color:white;
font-size:30px;
height: 100%;
background: rgb(79, 79, 79);
/* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
/* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(79, 79, 79, 1)), color-stop(100%, rgba(34, 34, 34, 1)));
/* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
/* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
/* IE10+ */
background: radial-gradient(ellipse at center, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
/* W3C */
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#4f4f4f', endColorstr='#222222', GradientType=1);
/* IE6-9 fallback on horizontal gradient */
}
HOVER ME
<div></div>
SVG solution
The shape is really simple to create in SVG.
For the svg interested:
<svg width="200px" height="200px" viewbox="0 0 400 400">
<path stroke="#000" stroke-width="50" fill="none"
d="M200 350 A 100 100 0 0 1 200 150
M200 150 200 125 225 150 200 175Z"/>
</svg>
Can i use it?
I have created this little thing in CSS, you can look at the code to see how it works.
Note: this does need a solid background.
.arrow {
width: 200px;
height: 200px;
border: 6px solid;
border-radius: 50%;
position: relative;
}
.arrow:before {
content: "";
display: block;
width: 10px;
height: 50px;
background: #fff;
position: absolute;
bottom: 0;
top: 0;
right: -6px;
margin: auto;
}
.arrow:after {
content: "";
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #000;
position: absolute;
bottom: 106px;
right: -20px;
}
<div class="arrow"></div>
Here's another way to do it using clip-paths instead of messing around with borders.
Demo - http://jsfiddle.net/r8rd0yde/4/
.arrow {
position: relative;
padding: 20px;
width: 100px;
height: 100px;
}
.circle {
position: absolute;
box-sizing: border-box;
height: 100px;
width: 100px;
border: 15px solid #000;
border-radius: 50%;
-webkit-clip-path: inset(0 50% 0 0);
clip-path: inset(0 50% 0 0);
}
.triangle {
position: absolute;
width: 35px;
height: 30px;
background: #000;
margin-top: -6px;
margin-left: 38px;
-webkit-clip-path: polygon(50% 0, 0% 100%, 100% 100%);
clip-path: polygon(50% 0, 0% 100%, 100% 100%);
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
/* JUST FOR DEMO */
.arrow:hover {
-webkit-transform: rotate(720deg);
-ms-transform: rotate(720deg);
transform: rotate(720deg);
transition: all 1.2s;
}
<div class="arrow">
<div class="circle"></div>
<div class="triangle"></div>
</div>
You can use the Clockwise open circle arrow (U+21BB) character: ↻
.arrow {
display: inline-block;
font-size: 300px;
line-height: 200px;
font-weight: bold;
transform: rotate(90deg);
}
<span class="arrow">↻</span>
#curvedarrow {
position: relative;
width: 0;
height: 0;
border-top: 9px solid transparent;
border-right: 9px solid red;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-ms-transform: rotate(10deg);
-o-transform: rotate(10deg);
}
#curvedarrow:after {
content: "";
position: absolute;
border: 0 solid transparent;
border-top: 3px solid red;
border-radius: 20px 0 0 0;
top: -12px;
left: -9px;
width: 12px;
height: 12px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
I found this in
https://css-tricks.com/examples/ShapesOfCSS/
It may not be the exact shape you want but it's definately a good starting point.