使用CSS 做小三角边框，原理及实现前端css3html5

前言：这个也是我最近学习才发现的一个细节，就是常常会在一些网站，看到下面图中这样的一个小三角，以前没怎么学CSS，我一直以为它是个精灵图之类。

文章图片

我是最近才开始认真学的前端，比纯小白稍微懂的稍微多一点点。
文章如若有那些不足之处，请及时指出，在此郑重感谢。
一、CSS三角做法我们先简单说一下，如何把三角画出来，懂用什么画的之后，基本就完事了。
html代码：

css代码：

.sanjiao { /* 为了好看让它居中 */ margin: 0 auto; /* 高度和宽度必须指定为零 */ width: 0; height: 0; /* 给四边都设置边框和颜色 */ border-bottom: 10px solid #FFD5A1; border-top: 10px solid #00A1D6; border-left: 10px solid saddlebrown; border-right: 10px solid seagreen; }

我们先来看看代码效果，之后再谈论其他的哈

文章图片

【使用CSS 做小三角边框，原理及实现】页面展示效果就是一个四个小三角拼成的正方形。
原理是什么呢？
盒子每一边的边框都是梯形的，盒子大小为0时，梯形上底(边框内边)也为0，所以两边会合并成三角形。
原理图大致就如下：

文章图片

当最后它中间的盒子宽度、高度都为零，就成了角形。
二、CSS京东应用原理知道了之后，我们来做一个小小的案例吧。
html代码：

css代码：

.mian { /* 我们再给父元素设置一个相对定位*/ position: relative; }.box1 { margin-top:10px; width: 100px; height: 100px; background-color: #81c784; border-radius:5px; }.box2 {width: 0px; height: 0px; /* 设置四边边框宽度，将颜色设置为透明 */ border: 10px solid transparent; /* 再进行下面的设置，这样之后就会出现一个紫色向上的一个小三角*/ border-bottom: 10px solid #E1BEE7; position: absolute; left: 80px; top: -10px; }

最后的成果大致如下：