css的变幻简直无穷无尽，css的探索持续近二十年，到现在基本算是功能丰富多彩，其没有逻辑性的编程思维，令我们抓耳挠腮，只有时间积累的经验与摸索，才能窥的它浅薄的面纱，如此才算是入门而已。有人问我：css和html到底是什么？算编程语言吗？我的回答是：是也不是，html可以被任何语言强奸然后生出来一个乖戾怪样的，比如jsp(java强奸了html)，PHP+html等等等，css呢？就连居中这个常用的排版方式就有近10种写法，用于各种不同场景，对于后端想要涉及前端的人这是一道天堑，无法逾越。唯有时间的洗练，你才能瞬秒的运用自如，别无他法。
扯了些闲话，今天我们来看看，怎么运用css来写三角形，网上多是直接性的语法给你，你完全不懂内层含义，个人也是在请教了很多教程和大神，才终于明白如何运用。于是，献上干货。
竟然是边框？？？
对于css新手来说，你告诉他三角形的实现是用边框来做的，他会不敢相信自己眼睛，于是从源头说起。
一般情况下，我们经常给一些div设一些边框，比如：
border: 1px solid yellow;
就设定了，一个黄色的边框。
很多人用这一属性没有发现奥妙，直到有一天，有个人这样玩：
<div class="triangle_divhavsize"></div>
<style>
.triangle_divhavsize {
width: 100px; height: 100px; background: #333;
border-top: 40px solid bisque;
border-bottom: 40px solid cadetblue;
border-left: 40px solid magenta;
border-right: 40px solid aquamarine;
}
</style>
效果如图：
你是不是忽然发现了什么？不过不明显那么我们把div的宽和高变为0.
<h3>三角形的规律：div无大小设置不同颜色的边框</h3>
<div class="triangle_divnosize"></div>
<style>
.triangle_divnosize {
width: 0; height: 0;
border-top: 40px solid bisque;
border-bottom: 40px solid cadetblue;
border-left: 40px solid magenta;
border-right: 40px solid aquamarine;
}
</style>
效果如图：
这样小伙伴是不是就找出玄机了？默认的边框区域其实是对折分为四个区域，顺序为：上右下左。
那么我们把左右给隐藏显示上下：
<h3>三角形的规律：起始假象</h3>
<div class="triangle_Illusion"></div>
<style>
.triangle_Illusion {
width: 0; height: 0;
border: 40px;
border-color: red transparent; /*transparent-用来指定全透明色彩*/
border-style: ridge; /*定义 3D 垄状边框。*/
}
</style>
效果如图：
这样我们通过定义 3D 垄状边框以及隐藏左右边框简单的实现了一个沙漏，丑是丑了点，但是没关系。我们再去掉下边框，看看效果：
<h3>三角形的规律：去掉下边框</h3>
<div class="triangle_onbottom"></div>
<style>
.triangle_onbottom {
width: 0; height: 0;
border-width: 40px 40px 0 40px; /*上右下左*/
border-color: red transparent;
border-style: ridge; /*定义 3D 垄状边框。*/
}
</style>
效果如图：
我们再做个直角，但是这里做直角有两种方式，这里先说第一种：
<h3>三角形的规律：直角-把不需要的隐藏（方式一）</h3>
<div class="triangle_rightangle1"></div>
<style>
.triangle_rightangle1 {
width: 0; height: 0;
border-width: 40px 40px 40px 40px; /*上右下左*/
border-color: bisque cadetblue transparent transparent;
border-style: solid;
}
</style>
效果如图：
这种方式是定义四个边框，然后显示其中两个，另外两个transparent。
再说第二种方法前，先做个示例，为了好理解第二种方式：
<h3>三角形的规律：直角-设置两个边框有值(以保留上右为例)</h3>
<div class="triangle_rightangle_value"></div>
<style>
.triangle_rightangle_value {
width: 0; height: 0;
border-width: 40px 40px 0 0; /*上右下左*/
border-color: bisque cadetblue magenta aquamarine;
border-style: solid;
}
</style>
效果如图：
这里我们只定义了两个边框上和右，并且给下左定义了颜色，下左没有显示，并且它并没有变为三角形，而是变为了一个正方形，很奇幻吧！
不过这也引出了另外变为三角形的方式：
<h3>三角形的规律：直角-把不需要的隐藏（方式二）</h3>
<div class="triangle_rightangle2"></div>
<style>
.triangle_rightangle2 {
width: 0; height: 0;
border-width: 40px 40px 0 0; /*上右下左*/
border-color: bisque transparent transparent transparent;
border-style: solid;
}
</style>
效果如图：
但是网上各种教授方法和写法并不是这样，而是这样：
<h3>三角形的规律：直角-把不需要的隐藏（方式二的变样）</h3>
<div class="triangle_rightangle2"></div>
<style>
.triangle_rightangle2 {
width: 0; height: 0;
border-top: 36px solid bisque;
border-right: 36px solid transparent;
}
</style>
效果如图：
小结
到此，css变幻三角形的多种写法就完成了，各位是不是到此就彻底明白了三角形怎么写？
提示：后面还有精彩敬请期待，请大家关注我的CSDN博文：侬姝沁儿，或者我的简书专题：web前端。如有意见可以进行评论，每一条评论我都会认真对待。
