画三角形

• 利用元素的 border 绘制三角形，先来看一下宽高均为 0，border 有宽度的效果：
  

实现代码如下：

<style>
.triangle {
            width: 0;
            height: 0;
            border-top: 100px solid #f00;
            border-right: 100px solid #0f0;
            border-bottom: 100px solid #00f;
            border-left: 100px solid #ff0;
        }
</style>
<div class="triangle"></div>

• 给任意三边的颜色设置为transparent即可实现任意方向上的三角形
  通过设置某条边的宽度比其他宽来调整高度，css样式如下：

  .triangle {
            width: 0;
            height: 0;
            border-top: 100px solid transparent;
            border-right: 100px solid transparent;
            border-bottom: 200px solid #00f;
            border-left: 100px solid transparent;
        }

效果图如下：

梯形

• 利用border也可绘制梯形，但是绘制梯形时宽高和border都要相同，css代码如下：

.triangle{
            width: 50px;
            height: 50px;
            background: #ff0;
            border-top: 50px solid #f00;
            border-bottom: 50px solid #00f;
            border-left: 50px solid #0f0;
            border-right: 50px solid #0ff;
}

效果图如下：

• 将另外三边和背景色都设置为透明色即可画出梯形，css代码如下

  .triangle {
            width: 50px;
            height: 50px;
            background: transparent;
            border-top: 50px solid transparent;
            border-bottom: 50px solid #00f;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
        }

效果图如下：

画扇形

• 直角扇形
  (1) 原理

左上角是圆角，其余三个角都是直角：左上角的值为宽和高一样的值，其他三个角的值都是0,此外还需设置背景色。
(2) 代码

    .sector{
            border-radius:100px 0 0;
            width: 100px;
            height: 100px;
            background: #00f;
            }

(3) 效果图

• 任意角度扇形
  (1) 原理

和三角形实现有些类似，设置border宽度，其余三边为透明色，再设置border-radius。
(2) 代码

.sector{
           border: 100px solid transparent;
            width: 0;
            border-radius: 100px;
            border-top-color: #f00;
        }

(3) 效果图

画椭圆

• 原理
  依赖border-radius,通过设置border-radius:水平半径/垂直半径
• 代码

.oval{
            width: 100px;
            height: 50px;
            background: #ff0;
            border-radius: 50px / 25px;
     }

• 效果图