1、css图形简介
在浏览网页的时候，我们经常看见各种图形的效果，而但凡涉及到图形效果，我们第一个想到的就是用图片来实现。但是在前端开发中，为了网站的性能速度，我们都是秉承着少用图片的原生质。
因为图片实现有两个很明显的缺点：一是图片大小比较大数据传输量大，二是一张图片会引发一次http请求。这两个方面都会影响页面加载速度，并且增加服务器负担
在实际开发中，对于下面图片效果我们更趋向于使用css实现方法
（1）三角形
（2）圆形于圆角
（3）椭圆形
css实现的图形效果更多用于展示，并不适用JavaScript动态操作，若果想要实现JavaScript动态操作，大家应该去了解canvas或SVG
一、三角形
在css盒子模型中，当一个盒子的两条边在边角处相交，浏览器会在交点处按照某个角度（如果盒子是正方形，则为顺时针45度、135度、225度、315度）绘制一条接合线。
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css图形三角形</title>
<style type="text/css">
#box{
width: 30px;
height: 30px;
border-width: 20px;
border-style: solid;
border-color: yellow blue red green;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
结果：
当我们把width、height设置为0时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css图形三角形</title>
<style type="text/css">
#box{
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: yellow blue red green;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
结果：
这是我们在把左右下三个边的颜色设置为transparent（透明）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css图形三角形</title>
<style type="text/css">
#box{
width: 0;
height: 0;
border-width: 20px;
border-style: solid;
border-color: yellow transparent transparent transparent;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
结果：
带边框的三角形
要实现带边框的三角形，我们知道刚才实现的三角形本来就是通过三角形实现的，不可能在设置border，这时候我们就需要用两个三角形来实现，背景色通过内三角形实现，边框通过外三角形实现然后通过定位布局重叠在一起。
注意，两个三角形定位要相差一个像素，一般情况下，都是将内层三角形相对于外层三角形进行定位，偏移1像素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>带边框的三角形</title>
<style type="text/css">
/*外三角形*/
#triangle{
position: relative;
width: 0;
height: 0;
border-width: 30PX;
border-style: solid;
border-color: transparent transparent black transparent;
}
/*内层三角形*/
#triangle div{
position: absolute;
top: 1px;
left: 0px;
width: 0;
height: 0;
border-width: 29px;/*注意内层三角形边高29px*/
border-style: solid;
border-color: transparent transparent #BBFFEE transparent; }
</style>
</head>
<body>
<div id="triangle">
<div></div>
</div>
</body>
</html>
结果
为什么跟预想的不一样呢？
这是因为子元素绝对定位是根据父元素的“内容边界”进行定位的，而不是根据我们耨眼搜看见的三角形边界来进行定位。又因为盒子的宽高皆为0，因此content实在盒子的中心。
这时把top:-28px;left:-29px;就可以了；