纯CSS画三角形

Author： Lindo
发布时间：May 30, 2019
1019views
No comments
3230 words
Categories： FrontEnd

先贴一段代码

width: 0;
    height: 0;
    border-left: 100px solid yellow;
    border-right: 100px solid green;
    border-bottom: 100px solid red;
    border-top: 100px solid blue;

效果图：

![微信图片_20190530165841.png][1]

----------

## 问题一：假如去掉一个边呢？（剩下三条） ##

width: 0;
    height: 0;
    border-left: 100px solid yellow;
    border-right: 100px solid green;
    border-bottom: 100px solid red;
    //border-top: 100px solid blue;

效果图：

![微信图片_20190530170035.png][2]

由图可知我们去掉了border-top 实际效果中上边的边框消失了。

## 问题二：那我再去掉一条边呢？（剩下两条） ##

width: 0;
    height: 0;
    border-left: 100px solid yellow;
    border-right: 100px solid green;
    //border-bottom: 100px solid red;
    //border-top: 100px solid blue;

效果： **无图形出现**

width: 0;
    height: 0;
    border-left: 100px solid yellow;
    border-right: 100px solid green;
    border-bottom: 100px solid red;
    //border-top: 100px solid blue;

### 这次换左边 ###

width: 0;
    height: 0;
    //border-left: 100px solid yellow;
    border-right: 100px solid green;
    border-bottom: 100px solid red;
    //border-top: 100px solid blue;

效果：
![微信图片_20190530170457.png][3]

### 右边 ###

结论：必须两条不对成的边有宽度（长度）图形才会出现
</div>
<div class="tip inlineBlock error">

上下、左右均不会出现图形，理解也很简单，一个没有高度，一个没有高度
</div>

width: 0;
    height: 0;
    border-left: 100px solid yellow;
    //border-right: 100px solid green;
    border-bottom: 100px solid red;
    //border-top: 100px solid blue;

效果：
![微信图片_20190530170614.png][4]

## 问题三： 那我再去掉一条边呢？ ##

width: 0;
    height: 0;
    //border-left: 100px solid yellow;
    //border-right: 100px solid green;
    border-bottom: 100px solid red;
    //border-top: 100px solid blue;

效果：**无图形出现**

## 问题四： 边的长度决定了什么？ ##

### 这次我们把下边长度变为200px ###

width: 0;
    height: 0;
    border-left: 100px solid yellow;
    border-right: 100px solid green;
    border-bottom: 200px solid red;
    //border-top: 100px solid blue;

效果：图形的高变成了200**或者说从中心点到下边的距离变为了200px**

![微信图片_20190530171016.png][5]

----------

### 继续这次把左边宽度变为200px ###

width: 0;
    height: 0;
    border-left: 200px solid yellow;
    border-right: 100px solid green;
    border-bottom: 100px solid red;
    //border-top: 100px solid blue;

效果： **图形中心点到左边距变为了200px**

![微信图片_20190530171245.png][6]

## 问题四：我只想要一个三角形怎么办？ ##

width: 0;
    height: 0;
    border-left: 200px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 100px solid red;
    //border-top: 100px solid blue;

那我把另外两条边的颜色变为透明不就好了吗： `transparent`

效果：

![微信图片_20190530171645.png][7]

## 结论 ##

理解边距是从中心点到边的距离，就可以做出自己想要的图形了，配合透明色`transparent`与定位，就可以配合其他图形做出各种不规则的图形了！

[1]: http://www.godlike.top/usr/uploads/2019/05/4164909998.png
  [2]: http://www.godlike.top/usr/uploads/2019/05/2301484537.png
  [3]: http://www.godlike.top/usr/uploads/2019/05/1471552363.png
  [4]: http://www.godlike.top/usr/uploads/2019/05/3693592866.png
  [5]: http://www.godlike.top/usr/uploads/2019/05/522475426.png
  [6]: http://www.godlike.top/usr/uploads/2019/05/3655543417.png
  [7]: http://www.godlike.top/usr/uploads/2019/05/1955702717.png

Last modification：August 26th, 2019 at 01:34 pm

If you think my article is useful to you, please feel free to appreciate

纯CSS画三角形

Lindo • 2019 年 05 月 30 日

先贴一段代码

width: 0;
    height: 0;
    border-left: 100px solid yellow;
    border-right: 100px solid green;
    border-bottom: 100px solid red;
    border-top: 100px solid blue;

效果图：

![微信图片_20190530165841.png][1]

----------

## 问题一：假如去掉一个边呢？（剩下三条） ##

width: 0;
    height: 0;
    border-left: 100px solid yellow;
    border-right: 100px solid green;
    border-bottom: 100px solid red;
    //border-top: 100px solid blue;

效果图：

![微信图片_20190530170035.png][2]

由图可知我们去掉了border-top 实际效果中上边的边框消失了。

## 问题二：那我再去掉一条边呢？（剩下两条） ##

width: 0;
    height: 0;
    border-left: 100px solid yellow;
    border-right: 100px solid green;
    //border-bottom: 100px solid red;
    //border-top: 100px solid blue;

效果： **无图形出现**

width: 0;
    height: 0;
    border-left: 100px solid yellow;
    border-right: 100px solid green;
    border-bottom: 100px solid red;
    //border-top: 100px solid blue;

### 这次换左边 ###

width: 0;
    height: 0;
    //border-left: 100px solid yellow;
    border-right: 100px solid green;
    border-bottom: 100px solid red;
    //border-top: 100px solid blue;

效果：
![微信图片_20190530170457.png][3]

### 右边 ###

结论：必须两条不对成的边有宽度（长度）图形才会出现
</div>
<div class="tip inlineBlock error">

上下、左右均不会出现图形，理解也很简单，一个没有高度，一个没有高度
</div>

width: 0;
    height: 0;
    border-left: 100px solid yellow;
    //border-right: 100px solid green;
    border-bottom: 100px solid red;
    //border-top: 100px solid blue;

效果：
![微信图片_20190530170614.png][4]

## 问题三： 那我再去掉一条边呢？ ##

width: 0;
    height: 0;
    //border-left: 100px solid yellow;
    //border-right: 100px solid green;
    border-bottom: 100px solid red;
    //border-top: 100px solid blue;

效果：**无图形出现**

## 问题四： 边的长度决定了什么？ ##

### 这次我们把下边长度变为200px ###

width: 0;
    height: 0;
    border-left: 100px solid yellow;
    border-right: 100px solid green;
    border-bottom: 200px solid red;
    //border-top: 100px solid blue;

效果：图形的高变成了200**或者说从中心点到下边的距离变为了200px**

![微信图片_20190530171016.png][5]

----------

### 继续这次把左边宽度变为200px ###

width: 0;
    height: 0;
    border-left: 200px solid yellow;
    border-right: 100px solid green;
    border-bottom: 100px solid red;
    //border-top: 100px solid blue;

效果： **图形中心点到左边距变为了200px**

![微信图片_20190530171245.png][6]

## 问题四：我只想要一个三角形怎么办？ ##

width: 0;
    height: 0;
    border-left: 200px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 100px solid red;
    //border-top: 100px solid blue;

那我把另外两条边的颜色变为透明不就好了吗： `transparent`

效果：

![微信图片_20190530171645.png][7]

## 结论 ##

理解边距是从中心点到边的距离，就可以做出自己想要的图形了，配合透明色`transparent`与定位，就可以配合其他图形做出各种不规则的图形了！

纯CSS画三角形

Leave a Comment Cancel reply

关于毕业的一些小问题

昆承湖畔

博客小目标终结

临近毕业的随想

handsome主题音乐插件启动失败

小试牛刀之使用指令完成clickOutSide功能

生活与设计（一）一点小灵感

macOS安装NVM

从游戏设计的角度重新分析游戏--天命奇御篇

七月随机阅读文章目录(2021Y)

纯CSS画三角形