用 css 画三角形、梯形、扇形、箭头和椭圆几种基本形状

1. 画三角形

利用元素的 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 便可分别实现任一方向的三角形。

经过设置某条边的宽度比其它边宽，来调整三角形的高度。

<style> .triangle { width: 0; height: 0; border: 100px solid transparent; border-bottom: 200px solid #0ff; } </style>
复制代码

经过设置某条边的宽度比其它边窄，来调整三角形的宽度。

<style> .triangle { width: 0; height: 0; border: 100px solid transparent; border-bottom: 200px solid #0ff; } </style>
复制代码

2. 画梯形

梯形也是基于 border 来绘制的，只不过绘制梯形时，宽高和border尺寸相同。

<style> .trapezoid { 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; } <div class="trapezoid"></div> </style>
复制代码

而后与三角形同理，把任意三边颜色设置为 transparent便可获得某一朝向的梯形。

3. 画扇形

任意角度的有点复杂，暂时先只实现90度的吧。

原理：左上角是圆角，其他三个角都是直角：左上角的值为宽和高同样的值，其余三个角的值不变（等于0）。 border-radius四个值的顺序是：左上角，右上角，右下角，左下角。

<style> .sector1 { border-radius:100px 0 0; width: 100px; height: 100px; background: #00f; } <div class="sector1"></div> </style>
复制代码

原理：和三角形的实现有些相似。

<style> .sector2 { border: 100px solid transparent; width: 0; border-radius: 100px; border-top-color: #f00; } <div class="sector2"></div> </style>
复制代码

4. 画箭头

利用三角绘制箭头，只须要再绘制一个和此三角大小相同，方向相同的三角，颜色和背景颜色同样，覆盖在此三角上面，经过少许的位移造成箭头。

<style> .arrow{ width: 0; height: 0; border: 50px solid; border-color: transparent #0f0 transparent transparent; position: relative; } .arrow::after{ content: ''; position: absolute; right: -55px; top: -50px; border: 50px solid; border-color: transparent #fff transparent transparent; } <div class="arrow"></div> </style>
复制代码

5. 椭圆

椭圆依旧依赖 border-radius 属性，不少人应该都没注意过，border-radius 其实能够设置水平半径和垂直半径两个值 ，参考MDN - border-radius,具体用法为 border-radius: 水平半径 / 垂直半径;.

<style> .oval { width: 100px; height: 50px; background: #ff0; border-radius: 50px / 25px; } </style>
<div class="oval"></div>
复制代码

6. 总结