ساخت اشکال مختلف هندسی در CSS(بخش دوم)

سی اس اسدر بخش دوم از سری مطالب ساخت اشکال مختلف هندسی در CSS می خواهیم به ساخت اشکال بیشتری بپردازیم و این مبحث را کمی کامل تر کنیم.در مورد کاربرد فراوان اشکال هندسی که با سی اس اس ساخته می شوند در بخش قبلی صحبت کردیم پس به مقدمات نمی پردازیم و کار را شروع می کنیم.

جهت مشاهده ی متن کامل ساخت اشکال مختلف هندسی در CSS(بخش دوم) به ادامه ی مطلب مراجعه نمایید

ساخت اشکال مختلف هندسی در CSS(بخش دوم)

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

برای شروع کار ابتدا یک صفحه ی اچ تی ام ال(HTML) می سازیم.سپس تمام تگ های دایو(Div) را وارد کرده و برای هر تگ،کلاس(class)یکی از اشکال را به آن می دهیم(کلاس هایی که برای اشکال به کار می روند عبارتند از:برای روبانribbon،ربع دایرهquartercircle،ذوزنقهtrapez،متوازی الاضلاعparallelogram و در آخر برای نمودار کلاسchart را قرار میدهیم)به این صورت:

<div class="ribbon"></div>
<div class="quartercircle"></div>
<div class="trapez"></div>
<div class="parallelogram"></div>
<div class="chart"></div>

سپس در داخل دو تگ استایل(style)که در بخش Head باز کرده ایم،برای هر کلاس استایل های مورد نیاز آن را می نویسیم:

.ribbon{
width:0;
height:100px;
border-right:50px solid orchid;
border-left:50px solid orchid;
border-bottom:30px solid transparent;
}
.quartercircle{
width:100px;
height:100px;
background:red;
border-radius: 0 90px 0 0;
-moz-border-radius: 0 90px 0 0;
-webkit-border-radius: 0 90px 0 0;
}
.trapez{
width:100px;
height:0;
border-bottom:100px solid yellowgreen;
border-left:60px solid transparent;
border-right:60px solid transparent;
}
.parallelogram{
width:100px;
height:100px;
background:chocolate;
transform: skew(-20deg);
-o-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-webkit-transform: skew(-20deg);
}
.chart{
width:0;
height:0;
border-right:60px solid transparent;
border-top:60px solid teal;
border-left:60px solid teal;
border-bottom:60px solid teal;
border-radius: 60px;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
}

به این ترتیب می توان این اشکال را با سی اس اس ساخت.در پست های بعدی سعی می کنم به ساخت مدل های بیشتر و جالب تری با سی اس اس بپردازم.

جهت دریافت اطلاعات بیشتر میتوانید به سایت های Stackoverflow و Codeproject نیز مراجعه نمایید

برای مشاهده ی آنلاین کد ها و اشکال ساخته شده می توانید به اینجا نیز سری بزنید