css 的规律摸索之路（一）css之三角形的规律及变化

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变幻三角形的多种写法就完成了，各位是不是到此就彻底明白了三角形怎么写？

提示：后面还有精彩敬请期待，请大家关注我的优快云博文：侬姝沁儿，或者我的简书专题：web前端。如有意见可以进行评论，每一条评论我都会认真对待。