از آنجایی که استفاده از شکل های ساخته شده توسط CSS در بین طراحان و توسعه دهندگان بیشتر شده، به درخواست دوست عزیز «احمد رضا» تصمیم گرفتم برخی از پرکاربرد ترین آنها را در این نوشته گردآوری کنم. اکثر این شکل ها ساده بوده و پیچیدگی خاصی ندارند. البته با ترکیب این شکل ها می شود نتایج جالبی به دست آورد که برخی از نمونه ها در زیر مشاهده خواهید کرد. مزایای زیادی در استفاده از این شکل ها وجود دارد. مهم ترین آن جایگزینی مناسب برای تصاویر است. برگ برنده ای که در بارگذاری صفحات وب بجای تصاویر بزرگ، از آن استفاده می شود. از طرفی با یک بار طراحی شکل می شود استایل های مختلف به آن داد که بعنوان مثال در طراحی آیکون ها و دکمه ها کارایی زیادی دارد. از طرفی متون استفاده شده در داخل این شکل ها بر خلاف متون داخل تصاویر، قابل ردگیری توسط موتورهای جستجو بوده و در SEO نقش مهمی ایفا میکند. متن دلخواه خود را می توانید در داخل خصوصیت content قراره دهید.

 

مربع

#square {
width:100px;
height:100px;
background:#888888;
}

 

مستطیل

#rectangle {
width:200px;
height:100px;
background:#888888;
}

 

دایره

#circle {
width:100px;
height:100px;
background:#888888;
-moz-border-radius:50px;
-webkit-border-radius:50px;
border-radius:50px;
}
/* Cleaner,but slightly less support:use "50%" as value */

 

بیضی

#oval {
width:200px;
height:100px;
background:#888888;
-moz-border-radius:100px / 50px;
-webkit-border-radius:100px / 50px;
border-radius:100px / 50px;
}
/* Cleaner,but slightly less support:use "50%" as value */

 

سه ضلعی رو به بالا

#triangle-up {
width:0;
height:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-bottom:100px solid #888888;
}

سه ضلعی رو به پایین

#triangle-down {
width:0;
height:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-top:100px solid #888888;
}

 

سه ضلعی رو به راست

#triangle-right {
width:0;
height:0;
border-top:50px solid transparent;
border-left:100px solid #888888;
border-bottom:50px solid transparent;
}

 

سه ضلعی رو به چپ

#triangle-left {
width:0;
height:0;
border-top:50px solid transparent;
border-right:100px solid #888888;
border-bottom:50px solid transparent;
}

 

سه ضلعی رو به بالا چپ

#triangle-topleft {
width:0;
height:0;
border-top:100px solid #888888;
border-right:100px solid transparent;
}

 

سه ضلعی رو به بالا راست

#triangle-topright {
width:0;
height:0;
border-top:100px solid #888888;
border-left:100px solid transparent;
}

 

سه ضلعی رو به پایین چپ

#triangle-bottomleft {
width:0;
height:0;
border-bottom:100px solid #888888;
border-right:100px solid transparent;
}

 

سه ضلعی رو به پایین راست

#triangle-bottomright {
width:0;
height:0;
border-bottom:100px solid #888888;
border-left:100px solid transparent;
}

 

ستاره پنج وجهی

#star-five {
margin:50px 0;
position:relative;
display:block;
color:red;
width:0px;
height:0px;
border-right:100px solid transparent;
border-bottom:70px solid #888888;
border-left:100px solid transparent;
-moz-transform:rotate(35deg);
-webkit-transform:rotate(35deg);
-ms-transform:rotate(35deg);
-o-transform:rotate(35deg);
}
#star-five:before {
border-bottom:80px solid #888888;
border-left:30px solid transparent;
border-right:30px solid transparent;
position:absolute;
height:0;
width:0;
top:-45px;
left:-65px;
display:block;
content:'';
-webkit-transform:rotate(-35deg);
-moz-transform:rotate(-35deg);
-ms-transform:rotate(-35deg);
-o-transform:rotate(-35deg);
}
#star-five:after {
position:absolute;
display:block;
color:red;
top:3px;
left:-105px;
width:0px;
height:0px;
border-right:100px solid transparent;
border-bottom:70px solid #888888;
border-left:100px solid transparent;
-webkit-transform:rotate(-70deg);
-moz-transform:rotate(-70deg);
-ms-transform:rotate(-70deg);
-o-transform:rotate(-70deg);
content:'';
}

 

ستاره شش وجهی

#star-six {
width:0;
height:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-bottom:100px solid #888888;
position:relative;
}
#star-six:after {
width:0;
height:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-top:100px solid #888888;
position:absolute;
content:"";
top:30px;
left:-50px;
}

 

ستاره دوازده وجهی

#twelve-point-star {
height:100px;
width:100px;
background:#888888;
position:absolute;
}
#twelve-point-star:before {
height:100px;
width:100px;
background:#888888;
content:"";
position:absolute;
/* Rotate */ -moz-transform:rotate(30deg);
-webkit-transform:rotate(30deg);
-ms-transform:rotate(30deg);
-o-transform:rotate(30deg);
transform:rotate(30deg);
}
#twelve-point-star:after {
height:100px;
width:100px;
background:#888888;
content:"";
position:absolute;
/* Rotate */ -moz-transform:rotate(-30deg);
-webkit-transform:rotate(-30deg);
-ms-transform:rotate(-30deg);
-o-transform:rotate(-30deg);
transform:rotate(-30deg);
}

 

قلب

#heart {
position:relative;
width:100px;
height:90px;
}
#heart:before,#heart:after {
position:absolute;
content:"";
left:50px;
top:0;
width:50px;
height:80px;
background:#888888;
-moz-border-radius:50px 50px 0 0;
border-radius:50px 50px 0 0;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
-webkit-transform-origin:0 100%;
-moz-transform-origin:0 100%;
-ms-transform-origin:0 100%;
-o-transform-origin:0 100%;
transform-origin:0 100%;
}
#heart:after {
left:0;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
-webkit-transform-origin:100% 100%;
-moz-transform-origin:100% 100%;
-ms-transform-origin:100% 100%;
-o-transform-origin:100% 100%;
transform-origin:100% 100%;
}

 

بی نهایت

#infinity {
position:relative;
width:212px;
height:100px;
}
#infinity:before,#infinity:after {
content:"";
position:absolute;
top:0;
left:0;
width:60px;
height:60px;
border:20px solid #888888;
-moz-border-radius:50px 50px 0 50px;
border-radius:50px 50px 0 50px;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
transform:rotate(-45deg);
}
#infinity:after {
left:auto;
right:0;
-moz-border-radius:50px 50px 50px 0;
border-radius:50px 50px 50px 0;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}

 

چهارضلعی غیرمنتظم (ذوذنقه)

#trapezoid {
border-bottom:100px solid #888888;
border-left:50px solid transparent;
border-right:50px solid transparent;
height:0;
width:100px;
}

 

لوزی متوازی الاضلاع

#diamond {
width:0;
height:0;
border:50px solid transparent;
border-bottom-color:#888888;
position:relative;
top:-50px;
}
#diamond:after {
content:'';
position:absolute;
left:-50px;
top:50px;
width:0;
height:0;
border:50px solid transparent;
border-top-color:#888888;
}

 

لوزی سپر شکل

 #diamond-shield {
width:0;
height:0;
border:50px solid transparent;
border-bottom:20px solid #888888;
position:relative;
top:-50px;
}
#diamond-shield:after {
content:'';
position:absolute;
left:-50px;
top:20px;
width:0;
height:0;
border:50px solid transparent;
border-top:70px solid #888888;
}

 

لوزی باریک

 #diamond-narrow {
width:0;
height:0;
border:50px solid transparent;
border-bottom:70px solid #888888;
position:relative;
top:-50px;
}
#diamond-narrow:after {
content:'';
position:absolute;
left:-50px;
top:70px;
width:0;
height:0;
border:50px solid transparent;
border-top:70px solid #888888;
}

 

لوزی الماسی شکل

#cut-diamond {
border-style:solid;
border-color:transparent transparent #888888 transparent;
border-width:0 25px 25px 25px;
height:0;
width:50px;
position:relative;
margin:20px 0 50px 0;
}
#cut-diamond:after {
content:"";
position:absolute;
top:25px;
left:-25px;
width:0;
height:0;
border-style:solid;
border-color:#888888 transparent transparent transparent;
border-width:70px 50px 0 50px;
}

 

متوازی الاضلاع

#parallelogram {
width:150px;
height:100px;
-webkit-transform:skew(20deg);
-moz-transform:skew(20deg);
-o-transform:skew(20deg);
background:#888888;
}

 

پنج ضلعی

#pentagon {
position:relative;
width:54px;
border-width:50px 18px 0;
border-style:solid;
border-color:#888888 transparent;
}
#pentagon:before {
content:"";
position:absolute;
height:0;
width:0;
top:-85px;
left:-18px;
border-width:0 45px 35px;
border-style:solid;
border-color:transparent transparent #888888;
}

 

شش ضلعی

#hexagon {
width:100px;
height:55px;
background:#888888;
position:relative;
}
#hexagon:before {
content:"";
position:absolute;
top:-25px;
left:0;
width:0;
height:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-bottom:25px solid #888888;
}
#hexagon:after {
content:"";
position:absolute;
bottom:-25px;
left:0;
width:0;
height:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-top:25px solid #888888;
}

 

هشت ضلعی

#octagon {
width:100px;
height:100px;
background:#888888;
position:relative;
}
#octagon:before {
content:"";
position:absolute;
top:0;
left:0;
border-bottom:29px solid #888888;
border-left:29px solid #fff;
border-right:29px solid #fff;
width:42px;
height:0;
}
#octagon:after {
content:"";
position:absolute;
bottom:0;
left:0;
border-top:29px solid #888888;
border-left:29px solid #fff;
border-right:29px solid #fff;
width:42px;
height:0;
}

 

تخم مرغی

#egg {
display:block;
width:126px;
height:180px;
background-color:#888888;
-webkit-border-radius:63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
}

 

پک من

#pacman {
width:0px;
height:0px;
border-right:60px solid transparent;
border-top:60px solid #888888;
border-left:60px solid #888888;
border-bottom:60px solid #888888;
border-top-left-radius:60px;
border-top-right-radius:60px;
border-bottom-left-radius:60px;
border-bottom-right-radius:60px;
}

 

حباب مکالمه

#talkbubble {
width:120px;
height:80px;
background:#888888;
position:relative;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
#talkbubble:before {
content:"";
position:absolute;
right:100%;
top:26px;
width:0;
height:0;
border-top:13px solid transparent;
border-right:26px solid #888888;
border-bottom:13px solid transparent;
}

 

Yin Yang

#yin-yang {
width:96px;
height:48px;
background:#eee;
border-color:#888888;
border-style:solid;
border-width:2px 2px 50px 2px;
border-radius:100%;
position:relative;
}
#yin-yang:before {
content:"";
position:absolute;
top:50%;
left:0;
background:#eee;
border:18px solid #888888;
border-radius:100%;
width:12px;
height:12px;
}
#yin-yang:after {
content:"";
position:absolute;
top:50%;
left:50%;
background:#888888;
border:18px solid #eee;
border-radius:100%;
width:12px;
height:12px;
}

 

نشان روبان

#badge-ribbon {
position:relative;
background:#888888;
height:100px;
width:100px;
-moz-border-radius:50px;
-webkit-border-radius:50px;
border-radius:50px;
}
#badge-ribbon:before,#badge-ribbon:after {
content:'';
position:absolute;
border-bottom:70px solid #888888;
border-left:40px solid transparent;
border-right:40px solid transparent;
top:70px;
left:-10px;
-webkit-transform:rotate(-140deg);
-moz-transform:rotate(-140deg);
-ms-transform:rotate(-140deg);
-o-transform:rotate(-140deg);
}
#badge-ribbon:after {
left:auto;
right:-10px;
-webkit-transform:rotate(140deg);
-moz-transform:rotate(140deg);
-ms-transform:rotate(140deg);
-o-transform:rotate(140deg);
}

 

صفحه تلویزیون

#tv {
position:relative;
width:200px;
height:150px;
margin:20px 0;
background:#888888;
border-radius:50% / 10%;
color:white;
text-align:center;
text-indent:.1em;
}
#tv:before {
content:'';
position:absolute;
top:10%;
bottom:10%;
right:-5%;
left:-5%;
background:inherit;
border-radius:5% / 50%;
}

 

درجه

#chevron {
position:relative;
text-align:center;
padding:12px;
margin-bottom:6px;
height:60px;
width:200px;
}
#chevron:before {
content:'';
position:absolute;
top:0;
left:0;
height:100%;
width:51%;
background:#888888;
-webkit-transform:skew(0deg,6deg);
-moz-transform:skew(0deg,6deg);
-ms-transform:skew(0deg,6deg);
-o-transform:skew(0deg,6deg);
transform:skew(0deg,6deg);
}
#chevron:after {
content:'';
position:absolute;
top:0;
right:0;
height:100%;
width:50%;
background:#888888;
-webkit-transform:skew(0deg,-6deg);
-moz-transform:skew(0deg,-6deg);
-ms-transform:skew(0deg,-6deg);
-o-transform:skew(0deg,-6deg);
transform:skew(0deg,-6deg);
}

 

ذره بین

#magnifying-glass {
font-size:10em;
/* This controls the size. */ display:inline-block;
width:0.4em;
height:0.4em;
border:0.1em solid #888888;
position:relative;
border-radius:0.35em;
}
#magnifying-glass::before {
content:"";
display:inline-block;
position:absolute;
right:-0.25em;
bottom:-0.1em;
border-width:0;
background:#888888;
width:0.35em;
height:0.08em;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform: rotate(45deg);
}

*منبع