Page Widget How to - Create Fancy CSS3 Arrows








Question

We would like to know how to create Fancy CSS3 Arrows.

Answer


<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: