css三角的做法及其案例

---

上期传送门：

👉[css中的选择器](()

👉[css盒子模型及其实战案例（上）](()

👉[css盒子模型及其实战案例（下）](()

👉[css网页布局之浮动及其实战案例（超详细）](()

👉[css中的定位详解](()

👉[css中元素的显示与隐藏](()

👉[我用css精灵图拼接了自己的英文名字，不会还有人不知道精灵图技术吧](()

---

这里写目录标题

• • 📋 个人简介

• 前言

• • css三角的做法

• 案例-京东效果

• 结语

[](()前言

=================================================================

今天总结css三角的知识，网页中一些常见的三角形使用css画出来就行，不必做成图片或者字体图标。

[](()css三角的做法

---

我说的css三角是什么呢，看图

就是图中圈起来的一部分，这部分我们怎么用css实现呢，一张图就知道怎么做了，接下来分享一下

css代码

div{

width:0;

height: 0;

line-height: 0;

font-size: 0;

border-left:10px solid purple ;

border-right:10px solid green ;

border-top:10px solid red ;

border-bottom:10px solid blue ;

}

其实原理就是做一个宽高为零的盒子，将边框宽度设置好，就可以得到任意大小的三角形，其中line-height: 0; font-size: 0;是考虑兼容性的，可以不写，

那么，我们要三角形是不是就很简单了，给其它三边颜色弄透明就可以了，我们可以得到各个方向的三角形。

例如：向上的三角形