首先，我们画一个div，给div加上border，看看盒子模型本来的样子
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.border{
width: 300px;
height: 300px;
border-width: 100px;
border-style: solid;
border-color: #a5affb #7b70de #8e44ad #663399;
}
</style>
</head>
<body>
<div class="border">这是一个彩色边的盒子</div>
</body>
</html>
border加粗的div.png
梯形：
.border{
width: 300px;
height: 300px;
border-width: 100px;
border-style: solid;
border-color: transparent transparent #8e44ad transparent;
}
<div class="border">这是一个彩色边的盒子</div>
css绘制梯形.png
由此可见，css绘制的梯形并不是一个容器，只是容器的一条边。css把容器的其余三条边设置为透明的，只显示需要的一条边，就是一个梯形了。
直角梯形
.border{
width: 300px;
height: 300px;
/*border-width: 100px;*/
border-left-width: 100px; /*有斜边的方向，数值的大小决定斜边的梯度率*/
border-bottom-width: 100px; /*梯形的高*/
border-style: solid;
border-color: transparent transparent #8e44ad transparent; /*选择显示哪个方向的梯形*/
}
<div class="border">这是一个彩色边的盒子</div>
直角梯形.png
三角形
盒子模型分为两种，一种是border-box，一种是center-box。低版本的ie中是border-box,在新的浏览器中，我们可以把容器的宽高设计为0或者特地设置box-sizing: border-box。
来看看border-box的效果：
.border{
width: 300px;
height: 300px;
box-sizing: border-box;
border-width: 300px;
border-style: solid;
border-color: #a5affb #7b70de #8e44ad #663399;
}
<div class="border">这是一个彩色边的盒子</div>
由此可见，当设置为border-box时，border的大小包含在容器大小之内,我们可以通过显示某条边来制作三角形
border-box.png
.border{
width: 300px;
height: 300px;
box-sizing: border-box;
border-width: 300px; /**/
border-style: solid;
border-color: transparent transparent #8e44ad transparent ; /*想要显示哪个方向的三角形*/
}
<div class="border">这是一个彩色边的盒子</div>
border-box 三角形.png
border-box画直角三角形
.border{
width: 300px;
height: 300px;
box-sizing: border-box;
border-left-width: 300px; /*底边长*/
border-bottom-width: 300px; /*三角形高*/
border-style: solid;
border-color: transparent transparent #8e44ad transparent;
}
<div class="border">这是一个彩色边的盒子</div>
border-box等腰直角三角形.png
center-box:
.border{
width: 0px;
height: 0px;
border-width: 300px;
border-style: solid;
border-color: #a5affb #7b70de #8e44ad #663399;
}
<div class="border">这是一个彩色边的盒子</div>
center-box.png
与border-box一样，可以根据控制border的width和方向来画出自己想要的三角形
网友评论