We would like to know how to create Fancy CSS3 Arrows.
<p>
Fancy CSS3 Arrows - jsFiddle demo by BlueCockatoo
from<!--from w w w .j av a2 s . co m-->
http://fiddle.jshell.net/BlueCockatoo/Y2SfN
</p>
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#arrows {
margin: 40px;
}
/* shafts */
.arrow {
position: relative;
border-width: 15px 0 0 0;
border-style: solid;
border-color: #791f83 transparent transparent transparent;
-moz-border-radius: 100%;
border-radius: 100%;
height: 100px;
width: 250px;
top: 0;
left: 0;
margin: -70px 0 0 0;
}
.arrow:first-child {
margin-top: 0;
}
/* straight triangle arrows */
#arrow-straight-left:after {
content: "";
position: absolute;
border-width: 30px 15px 0 15px;
border-style: solid;
border-color: #791f83 transparent transparent transparent;
height: 1px;
width: 1px;
top: 18px;
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 50% 0 0;
-moz-transform-origin: 50% 0 0;
-ms-transform-origin: 50% 0 0;
-o-transform-origin: 50% 0 0;
transform-origin: 50% 0 0;
}
#arrow-straight-right:after {
content: "";
position: absolute;
border-width: 30px 15px 0 15px;
border-style: solid;
border-color: #791f83 transparent transparent transparent;
height: 1px;
width: 1px;
top: 18px;
right: 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 50% 0 0;
-moz-transform-origin: 50% 0 0;
-ms-transform-origin: 50% 0 0;
-o-transform-origin: 50% 0 0;
transform-origin: 50% 0 0;
}
/* convex top arrowhead */
#arrow-convex-left:after {
content: "";
position: absolute;
border-width: 35px 20px 0 20px;
border-style: solid;
border-color: #791f83 transparent transparent transparent;
border-radius: 50% 50% 0 0;
height: 1px;
width: 1px;
top: 17px;
left: -5px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 50% 0 0;
-moz-transform-origin: 50% 0 0;
-ms-transform-origin: 50% 0 0;
-o-transform-origin: 50% 0 0;
transform-origin: 50% 0 0;
}
/* curvy Dr. Seuss type arrowhead */
#arrow-curvy-right:before {
content: "";
position: absolute;
border-width: 27px 0 0 0;
border-style: solid;
border-color: #791f83 transparent transparent transparent;
-moz-border-radius: 50% 100% 0 0;
border-radius: 50% 100% 0 0;
height: 30px;
width: 30px;
top: 10px;
right: -14px;
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-ms-transform: rotate(10deg);
-o-transform: rotate(10deg);
transform: rotate(10deg);
-webkit-transform-origin: 50% 0 0;
-moz-transform-origin: 50% 0 0;
-ms-transform-origin: 50% 0 0;
-o-transform-origin: 50% 0 0;
transform-origin: 50% 0 0;
}
#arrow-curvy-right:after {
content: "";
position: absolute;
border-width: 0 0 19px 0;
border-style: solid;
border-color: transparent transparent #791f83 transparent;
-moz-border-radius: 100%;
border-radius: 100%;
height: 30px;
width: 35px;
top: 10px;
right: 28px;
-webkit-transform: rotate(-75deg);
-moz-transform: rotate(-75deg);
-ms-transform: rotate(-75deg);
-o-transform: rotate(-75deg);
transform: rotate(-75deg);
-webkit-transform-origin: 50% 0 0;
-moz-transform-origin: 50% 0 0;
-ms-transform-origin: 50% 0 0;
-o-transform-origin: 50% 0 0;
transform-origin: 50% 0 0;
}
/* two point top arrowhead */
#arrow-pointy-left:before {
content: "";
position: absolute;
border-width: 0 15px 17px 30px;
border-style: solid;
border-color: transparent transparent #791f83 transparent;
height: 1px;
width: 1px;
top: 20px;
left: -17px;
-webkit-transform: rotate(-18deg);
-moz-transform: rotate(-18deg);
-ms-transform: rotate(-18deg);
-o-transform: rotate(-18deg);
transform: rotate(-18deg);
-webkit-transform-origin: 50% 0 0;
-moz-transform-origin: 50% 0 0;
-ms-transform-origin: 50% 0 0;
-o-transform-origin: 50% 0 0;
transform-origin: 50% 0 0;
}
#arrow-pointy-left:after {
content: "";
position: absolute;
border-width: 17px 15px 0 30px;
border-style: solid;
border-color: #791f83 transparent transparent transparent;
height: 1px;
width: 1px;
top: 22px;
left: -27px;
-webkit-transform: rotate(-75deg);
-moz-transform: rotate(-75deg);
-ms-transform: rotate(-75deg);
-o-transform: rotate(-75deg);
transform: rotate(-75deg);
-webkit-transform-origin: 50% 0 0;
-moz-transform-origin: 50% 0 0;
-ms-transform-origin: 50% 0 0;
-o-transform-origin: 50% 0 0;
transform-origin: 50% 0 0;
}
/* concave top arrowhead */
#arrow-concave-right:before {
content: "";
position: absolute;
border-width: 30px 15px 0 15px;
border-style: solid;
border-color: #791f83 transparent transparent transparent;
height: 1px;
width: 1px;
top: 18px;
right: 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 50% 0 0;
-moz-transform-origin: 50% 0 0;
-ms-transform-origin: 50% 0 0;
-o-transform-origin: 50% 0 0;
transform-origin: 50% 0 0;
}
#arrow-concave-right:after {
content: "";
position: absolute;
border-width: 0 0 12px 0;
border-style: solid;
border-color: transparent transparent #791f83 transparent;
-moz-border-radius: 100%;
border-radius: 100%;
height: 30px;
width: 35px;
top: -4px;
right: 20px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 50% 0 0;
-moz-transform-origin: 50% 0 0;
-ms-transform-origin: 50% 0 0;
-o-transform-origin: 50% 0 0;
transform-origin: 50% 0 0;
}
#header {
margin: 20px;
}
.sig {
margin: 7px 0;
}
</style>
</head>
<body>
<div id="header">
<h1>Fancy CSS3 Arrows</h1>
<div>
I made them so you wouldn't have to! <br /> Enjoy.
</div>
<div class="sig">Your pal, Lindsay</div>
</div>
<div id="arrows">
<div id="arrow-straight-left" class="arrow"></div>
<div id="arrow-straight-right" class="arrow"></div>
<div id="arrow-convex-left" class="arrow"></div>
<div id="arrow-curvy-right" class="arrow"></div>
<div id="arrow-pointy-left" class="arrow"></div>
<div id="arrow-concave-right" class="arrow"></div>
</div>
</body>
</html>
The code above is rendered as follows: