CSS 画三角形、半圆、扇形、

1.三角形：元素宽高设置为0，通过border属性来设置，让其它三个方向的border颜色为透明或者和背景色保持一致，剩余一条border的颜色设置为需要的颜色，三角形的方向就设置反方向的border。

.down {
    width: 0;
    height: 0;
    border: 100px solid transparent;
    border-top-color: red;
}

.up {
    width: 0;
    height: 0;
    border: 100px solid transparent;
    border-bottom-color: blue;
}

 

 

2.半圆：border-radius圆角的四个值按顺序取值分别为：左上、右上、右下、左下。要画半圆就要右下角、左下角的值为0就行了

.semi-circle {
	width: 100px;
	height: 100px;
	line-height: 100px;
	text-align: center;
	margin: 100px;
	background-color: yellow;
  border-radius: 100px 100px 0 0;
	height: 50px;
  }

3.扇形：扇形就是半圆的一半就直接给一个有值，其余三个为0就行了 

  .sector  {
	width: 100px;
	height: 100px;
	line-height: 100px;
	text-align: center;
	margin: 100px;
	background-color: green;
  border-radius: 100px  0 0;
  }