WebSoftPrograms: Pure Css3 Shapes - Shape # 2

Hello! Now I am sharing with you, four kinds of fancy arrows designed in Css3.You can also download from the given link below.

Preview Image

Directions :

Step 1: Add the following code to the <body> section of your Html page :

<div id="wrapper">
<h1>Pure Css3 Shapes</h1>
<h2>Shape # 2 - Arrow</h2>
<main>
<section>
<div class="column">
<table style="margin-top:50px !important" border="0">
<tr>
<td><div class="arrow-TopLeft"></div></td>
<td><div class="arrow-TopRight"></div></td>
</tr>
<tr>
<td><div class="arrow-BottomLeft"></div></td>
<td><div class="arrow-BottomRight"></div></td>
</tr>
</table>
</div>
</section>
</main>
</div>

Step 2: Add the following code to the <style> section of your Html page or Css :

*{
 padding:0px;
   margin:0px;
   font-family:Arial, Helvetica, sans-serif;
}
h1{
 font-size:72px;
 font-family:Calibri;
 color:#333;
 text-align:center;
 margin:25px auto;
}
h2{
 font-size:36px;
 font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
 color:#f60;
 text-align:center;
 margin:25px auto;
}
body{
 margin: 0px;
 padding: 0px;
 background-color:#E7E7E0;
}
.clear{
 clear:both;
}
.column{
 margin:15px;
 float:left;
 position:relative;
}
#logo{
 position:relative;
 float:left;
 width:475px;
 height:200px;
 background-image:url(wsp_logo.png);
 background-repeat: no-repeat;
}
#wrapper{
 width:1100px;
 height:auto;
 margin:0 auto;
 padding:0 auto;
}
main{
 width:100%;
 height:auto;
 margin:0 auto;
 padding:0 auto;
}
section{
 width:80%;
 margin:0 auto;
}
.arrow-TopLeft{
 float:left;
   position: relative;
   width: 0;
   height: 0;
 margin-right:40px;
 margin-bottom:10px;
   border-top: 36px solid transparent;
   border-right: 36px solid #333;
   -webkit-transform: rotate(-25deg) scaleX(-1);
 -moz-transform: rotate(-25deg) scaleX(-1);
 -o-transform: rotate(-25deg) scaleX(-1);
 -ms-transform: rotate(-25deg) scaleX(-1);
}
.arrow-TopLeft:after {
   content: "";
   position: absolute;
   border: 0 solid transparent;
   border-top: 12px solid #333;
   border-radius: 80px 0 0 0;
   top: -46px;
   left: -36px;
   width: 48px;
   height: 48px;
   -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
}

.arrow-TopRight{
 float:left;
   position: relative;
   width: 0;
   height: 0;
 margin-left:40px;
 margin-bottom:10px;
   border-top: 36px solid transparent;
   border-right: 36px solid #f60;
   -webkit-transform: rotate(25deg);
 -moz-transform: rotate(25deg);
 -o-transform: rotate(25deg);
 -ms-transform: rotate(25deg);
}
.arrow-TopRight:after {
   content: "";
   position: absolute;
   border: 0 solid transparent;
   border-top: 12px solid #f60;
   border-radius: 80px 0 0 0;
   top: -46px;
   left: -36px;
   width: 48px;
   height: 48px;
   -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
}

.arrow-BottomLeft{
 float:left;
   position: relative;
   width: 0;
   height: 0;
 margin-top:10px;
 margin-right:40px;
   border-top: 36px solid transparent;
   border-right: 36px solid #f60;
   -webkit-transform: rotate(25deg) scaleX(-1) scaleY(-1);
 -moz-transform: rotate(25deg) scaleX(-1) scaleY(-1);
 -o-transform: rotate(25deg) scaleX(-1) scaleY(-1);
 -ms-transform: rotate(25deg) scaleX(-1) scaleY(-1);
}
.arrow-BottomLeft:after {
   content: "";
   position: absolute;
   border: 0 solid transparent;
   border-top: 12px solid #f60;
   border-radius: 80px 0 0 0;
   top: -46px;
   left: -36px;
   width: 48px;
   height: 48px;
   -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
}
.arrow-BottomRight{
 float:left;
   position: relative;
   width: 0;
   height: 0;
 margin-top:10px;
 margin-left:40px;
   border-top: 36px solid transparent;
   border-right: 36px solid #333;
   -webkit-transform: rotate(-25deg) scaleY(-1);
 -moz-transform: rotate(-25deg) scaleY(-1);
 -o-transform: rotate(-25deg) scaleY(-1);
 -ms-transform: rotate(-25deg) scaleY(-1);
}
.arrow-BottomRight:after {
   content: "";
   position: absolute;
   border: 0 solid transparent;
   border-top: 12px solid #333;
   border-radius: 80px 0 0 0;
   top: -46px;
   left: -36px;
   width: 48px;
   height: 48px;
   -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
}

DOWNLOAD PROJECT SOURCE

Pure Css3 Shapes - Shape # 2 - Arrows

No comments:

Post a Comment