用纯css画三角形,半圆形和椭圆

三角形

原理：利用border-width的连线，和height:0,width:0结合，border-color来控制三角形实际方向

#triangle{
  width:0px;
  height:0px;
  border-width:20px;
  border-style:solid;
  border-color: red  transparent transparent green;
}

带边框三角形

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

#triangle{
  width:0px;
  height:0px;
  border-width:60px;
  border-style:solid;
  border-color: red transparent transparent transparent;
  position:absolute;
}
#triangle div{
  width:0px;
  height:0px;
  border-width:60px;
  border-style:solid;
  border-color: blue transparent transparent transparent;
  position:absolute;
  top:-61px;
  left:-60px;
}

半圆形

原理：上半圆举例。

#halfcircle{
  width:100px;
  height:50px;
  border: 1px solid red;
  border-radius: 100px 100px 0 0
}

椭圆

#ellipse{
width:160px;
height:100px;
border:1px solid gray;
border-radius:80px/50px;
}