好看的前端网页大家见到的应该都不少
但是很多都是用图片作为背景
今天我们就给大家讲讲怎么用css绘制图形
（图形如下）
----------------------------------------------------------------------
首先可以看到有一个div盒子
宽300个像素值
width: 300px;
高100个像素值
height: 100px;
边框1个像素值并且是黑色的实线
border: 1px solid #000;
最后还有四个圆角大概30个像素值
border-radius: 30px;
（圆角像素值凭自行喜欢）
----------------------------------------------------------------------
接下来是三角形的绘制
也是我们今天的重点
这时候再建一个div盒子
高和宽的像素值都设置成没有像素值，也就是0像素值
width:0px;height: 0px;
再将上方的圆角去掉
重点来了
接下来将上下左右的边框设置为10个像素值 给个颜色就会如下
----------------------------------------------------------------------
那当我们去掉右边框以及隐藏上下边框时
先删除掉右边框
将上下的边框改为隐藏
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
因为上方的div原因我们将图片做了点修改
并且放大观看效果
----------------------------------------------------------------------
这时候三角形已经出现了
聪明的小伙伴就知道接下来该怎么做了
那我也不费话
用li来做，然后悬浮起来 背景颜色改成左边div盒子
最后把左外边距调成负便好啦
不同方向的三角形删除对边，隐藏双边的边框即可
而不同角度大小的三角形通过改变存在的像素值即可做到
具体的欢迎小伙伴讨论提出问题哦
转自：双鱼站
