盒模型+实现各种形状

盒模型

标准盒模型：box-sizing:content-box
怪异(IE)盒模型：box-sizing:border-box (盒子包括内容区、内边框、边框)

椭圆

高度要设置为宽度的一半，border-radius也为各自一半。

.oval{
    width:200px;
    height:100px;
    border-radius:100px/50px;
    background: #e9337c;
}
<div class="oval"></div>

三角形

.triangle {
    width: 0;
    height: 0;
    border-bottom: 140px solid #fcf921;
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
}   
<div class="triangle"></div>                   

菱形

.diamond {
    width: 120px;
    height: 120px;
    background: #1eff00;
    transform: rotate(-30deg);
    }
<div class="diamond"></div>    

image.png

梯形

.trapezium {
    height: 0;
    width: 120px;
    border-bottom: 120px solid #ec3504;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
}       
<div class="trapezium"></div>    

平行四边形

.parallelogram {
    width: 160px;
    height: 100px;
    background: #8734f7;
    transform: skew(30deg);
} 
<div class="parallelogram"></div>              

半圆

<div id="cicle">
            <div id="cicle-in"></div>
</div>
#cicle-in{
  width:50px;
  height:100px;
  float: right;
  background-color:white;
}
#cicle{
  width:100px;
  height:100px;
  background-color:red;
  border-top-left-radius:100%;
  border-bottom-left-radius:100%;

}

半圆