اشکال هندسی در css

ساخت 20 شکل هندسی جالب فقط با CSS – قسمت دوم

اشکال هندسی در css – قسمت دوم

خب در قسمت اول اقدام به ساخت اشکال هندسی مرسوم توسط css کردیم  در اموزش اشکال هندسی در css

در این قسمت میخواهیم اشکال دیگری رو به شما معرفی کنیم

(توجه داشته باشید که اگر میخواهید از این اشکال به عنوان ایکن در سایت استفاده کنید هرگز این کارا را نکنید ما اموزش های دیگری را به مراتب ساده تر ارائه میکینیم که شما میتوانید به راحتی از انها استفاده کنید)فایل های png یا کتابخانه font awesome نمونه هایی از ان ها هستتند که به زودی اموزش هایشان در سایت به صورت ویدیویی قرار خواهد گرفت

مقدمه

در این مقاله که در دو قسمت تهیه شده و انتشار میابد انواع مختلف اشکال هندسی را با هم میسازیم .حتی اشکالی نظیر آرم کنگ فو یا ذره بین و یا اشکال دیگری که از CSS بعید به نظر میرسد را میتوان با استفاده از CSS طراحی کرد.

در این مقاله ابتدا از اشکال ساده مانند مربع و مستطیل شروع میکنیم و به اشکال سخت تر میرسیم با ما همراه باشید…

 

شروع با HTML

ابتدا یک باید در صفحه html یک <div> درست کنیم تا تغیرات رو روی اون اعمال کنیم برای مثال ما یک از یک div ساختیم و کلاس های هر شکل را به قسمت ایدی div  مورد نظر میدهیم

قسمت اول اموزش

کد html

<div id=”idname”>

test

</div>

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


#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:'';
}

 

ستاره شش وجهی اشکال هندسی در css







#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);
}

 

لوزی الماسی






#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;
}

 

پنج ضلعی






#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;
} 

 

ارم کنگ فو






#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;
}

 

ذره بین






#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);
}

تمام

 

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *