کد انواع اشکال هندسی با CSS ( قسمت دوم )

در این پست از وب سایت یک لرن مجموعه دوم کد انواع اشکال هندسی با CSS ( قسمت دوم ) را برای شما آماده کرده ایم که امیدواریم برای شما مفید واقع شود

شما میتوانید برای مراجعه به کد انواع اشکال هندسی با CSS ( قسمت اول ) کلیک کنید !

برای مشاهده بخش دوم در ادامه مطلب همراه ما باشید …

کد انواع اشکال هندسی با CSS ( قسمت دوم )

کد انواع اشکال هندسی با CSS ( قسمت دوم )

 5- کد ساخت مثلث به سمت بالا با CSS3

کد html :

<div id="up-triangle"></div>

کد CSS :

#up-triangle {
   width: 0;
   height: 0;
   border-bottom: 120px solid blue;
   border-left: 60px solid transparent;
   border-right: 60px solid transparent;
}

6- کد ساخت مثلث به سمت پایین با CSS3

کد html :

<div id="down-triangle"></div>

کد CSS :

#down-triangle {
   width: 0;
   height: 0;
   border-top: 120px solid blue;
   border-left: 60px solid transparent;
   border-right: 60px solid transparent;
}

7 – کد ساخت مثلث به سمت راست با CSS3

کد html  :

<div id="right-triangle"></div>

کد CSS :

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

8 – کد ساخت مثلث به سمت چپ با CSS3

کد html :

<div id="left-triangle"></div>

کد CSS :

 

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

9 – کد ساخت متوازی الاضلاع با CSS3

کد html :

<div id="parallelogram"></div>

کد CSS :

#parallelogram {
   width: 130px;
   height: 75px;
   background: blue;
   -webkit-transform: skew(20deg);
   -moz-transform: skew(20deg);
   -o-transform: skew(20deg);
   transform: skew(20deg);
}

در اینجا قسمت دوم کد شکل های هندسی به پایان رسید
امیدواریم این بخش نیز برای شما مفید بوده باشه
منتظر بخش های آینده باشید !

فرادرس

برچسب ها : ، ، ، ، ، ، ، ،