关于盒子模型的应用（制作三角形）

HTML代码：

<article>

   <div class="demo_1">

   </div> 

</article>

CSS代码：

article .demo_1{
border:100px solid red;
border-left-color: #0066cc;
border-right-color: #080808;
border-bottom-color: #339900;
height: 0;
width: 0;
}

 

原理：盒子模型分为四个模块：

1：外边距（margin）

2：边框(border)

3：内边距(padding)

4：内容(content)

当内边距和内容宽和高都为0的时候，能显示的部分就只有边框，而边框也具有四个属性：top bottom left right 

利用这些属性分别设置颜色就可以显示出三角形的效果.

如果配合着伪类，就可以制作出很多奇特的效果

转载于:https://www.cnblogs.com/gavinzzh-firstday/p/5330676.html