در این مقاله نحوه ساخت اشکال هندسی گوناگون را در Css خواهیم آموخت و کد هر کدام از این اشکال به صورت Sample ضمیمه مقاله خواهد بود

Sample مربوط به این مقاله در ASP.NET درست شده است ولی شما می توانید در یک صفحه ساده HTML آن را بسازید

گاهی اوقات در هنگام طراحی صفحات وب نیاز دارید که اشکال گوناگون هندسی بسازید.در این مقاله کد مربوط به هر کدام از اشیا آورده شده است 

مستطیل

کد مربوط به مستطیل در Css مانند زیر است 

.rectangle {
	width: 250px;
	height: 150px;
	background-color: #6DC75F;
}

<div class="rectangle"></div>

مثلث

کد مربوط به مثلث به صورت زیر است .

.triangleUp {
            border-left: 75px solid transparent;
            border-right: 75px solid transparent;
            border-bottom: 150px solid  #6DC75F;
            width: 0;
            height: 0;
        }

<div class="triangleUp"></div>

بیضی

کد مربوط به بیضی در زیر آورده شده است 

.oval {
    width: 300px;
    height: 150px;
    background: #6DC75F;
    -moz-border-radius: 150px / 75px;
    -webkit-border-radius: 150px / 75px;
    border-radius: 150px / 75px;
}

<div class="oval"></div>

ماه

کد مربوط به ماه را در زیر ببینید

.moon {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  box-shadow: 15px 15px 0 0 green;
}

<div class="moon"></div>

برگ

کد مربوط به شکل برگ در زیر آمده است 

.leaf {
    border-radius: 5px 300px 3px 300px;
    background: #6DC75F;
    width: 150px;
    height: 150px;
}


<div class="leaf"></div>