الدرس 3: أشكال هندسية جميلة بإستخدام CSS فقط !

نتابع معكم في سلسلة الدروس الخاصة بـ HTML5 و CSS3 و jQuery واليوم سو نتلكم عن كيفية عمل أشكال هندسية بإستخدام CSS حتى المعقدة منها يمكننا بنائها بإستخدام CSS فقط !

  

طبعاً يمكننا عم الأشكال البسيطة الإعتيادية مربع مستطيل دائرة والأشكال المعقدة مثل نجمة خماسية أو سداسية أو شبه منحرف وأشكال أكثر تعقيداً مثل بيضة أو ألماسة أو شكل المكبر وإشارة اللانهاية.

سنبدأ مع أبسط الأشكال وهو المربع والمستطيل

<div id="rectangle"></div>
#rectangle {
   width: 200px;
   height: 100px;
   background: red;
}
.

 

وهذه الدائرة يمكن عملها بالكود البسيط التالي

<div id="circle"></div>
#circle {
   width: 100px;
   height: 100px;
   background: red;
   -moz-border-radius: 50px;
   -webkit-border-radius: 50px;
   border-radius: 50px;
}
.

 

 ويمكن تعديل الدائرة إلى شكل بيضوي بزيادة الأبعاد والزوايا كما في الكود التالي

<div id="oval"></div>
#oval {
   width: 200px;
   height: 100px;
   background: red;
   -moz-border-radius: 100px / 50px;
   -webkit-border-radius: 100px / 50px;
   border-radius: 100px / 50px;
}
.

 

 وننتقل إلى المثلثات حيث يمكن عملها بكل الإتجاهات وكل الأشكال

هذا المثلث متجه للأعلى

<div id="triangle-up"></div>
#triangle-up {
   width: 0;
   height: 0;
   border-left: 50px solid transparent;
   border-right: 50px solid transparent;
   border-bottom: 100px solid red;
}
.

 

 هذا المثلث متجه لليمين

<div id="triangle-right"></div>
#triangle-right {
   width: 0;
   height: 0;
   border-top: 50px solid transparent;
   border-left: 100px solid red;
   border-bottom: 50px solid transparent;
}
.
 
شبه منحرف
<div id="trapezoid"></div>
#trapezoid {
   border-bottom: 100px solid red;
   border-left: 50px solid transparent;
   border-right: 50px solid transparent;
   height: 0;
   width: 100px;
}
.

 

 وهنا الأشكال الأكثر تعقيداً كـ النجوم

النجمة الخماسية

<div id="star-five"></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 red;
   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 red;
   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 red;
   border-left: 100px solid transparent;
   -webkit-transform: rotate(-70deg);
   -moz-transform: rotate(-70deg);
   -ms-transform: rotate(-70deg);
   -o-transform: rotate(-70deg);
   content: '';
}
.

 

 النجمة السداسية

<div id="star-six"></div>
#star-six {
   width: 0;
   height: 0;
   border-left: 50px solid transparent;
   border-right: 50px solid transparent;
   border-bottom: 100px solid red;
   position: relative;
}
#star-six:after {
   width: 0;
   height: 0;
   border-left: 50px solid transparent;
   border-right: 50px solid transparent;
   border-top: 100px solid red;
   position: absolute;
   content: "";
   top: 30px;
   left: -50px;
}
.
 
النجمة الثمانية
<div id="star-8"></div>
#star-8 {
   background: red;
   width: 80px;
   height: 80px;
   position: relative;
   text-align: center;
   -webkit-transform: rotate(20deg);
  -moz-transform: rotate(20deg);
   -ms-transform: rotate(20deg);
   -o-transform: rotate(20eg);
}
#star-8:before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   height: 80px;
   width: 80px;
   background: red;
   -webkit-transform: rotate(135deg);
   -moz-transform: rotate(135deg);
   -ms-transform: rotate(135deg);
   -o-transform: rotate(135deg);
}
.

 

وهذه أشكال أكثر تعقيداً مثل القلب 

<div id="hart"></div>
#heart {
   position: relative;
   width: 100px;
   height: 90px;
}
#heart:before,
#heart:after {
   position: absolute;
   content: "";
   left: 50px;
   top: 0;
   width: 50px;
   height: 80px;
   background: red;
   -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%;
}
.

 

وهذا شكل البيضة

<div id="egg"></div>
#egg {
   display:block;
   width: 126px;
   height: 180px;
   background-color: red;
   -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
   border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
.

 

 وهذا شكل إشارة اللانهاية

<div id="infinity"></div>
#infinity {
   position: relative;
   width: 120px;
   height: 100px;
}

#infinity:before,
#infinity:after {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 60px;
   height: 60px;
   border: 20px solid red;
   -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);
}
.

 

  إذا واجهتكم أي مشاكل أو أي استفسار يمكنكم ترك تعليق هنا أو على الفيسبوك.

شارك برأيك