前言：
这个也是我最近学习才发现的一个细节，就是经常会在一些网站，看到上面图中这样的一个小三角，以前没怎么学 CSS，我始终认为它是个精灵图之类。😂
我是最近才开始认真学的前端，比纯小白略微懂的略微多一点点。
文章如若有那些不足之处，请及时指出，在此郑重感激。
一、CSS 三角做法
咱们先简略说一下，如何把三角画进去，懂用什么画的之后，根本就完事了。
html 代码：
<div class="sanjiao">
</div>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;
}咱们先来看看代码成果，之后再议论其余的哈
页面展现成果就是一个四个小三角拼成的正方形。
原理是什么呢？
盒子每一边的边框都是梯形的，盒子大小为 0 时，梯形上底 (边框内边) 也为 0，所以两边会合并成三角形。
原理图大抵就如下：
当最初它两头的盒子宽度、高度都为零，就成了角形。
二、CSS 京东利用
原理晓得了之后，咱们来做一个小小的案例吧。
html 代码：
<div class="main">
<div class="box1">
</div>
<!-- 再写一个 div 来做三角 -->
<div class="box2">
</div>
</div>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;
}
</style>最初的成绩大抵如下：
css 这个边框还有很多能够玩，还在学习中 …
三、喃喃自语
最近在学 css，说真的，感觉的确比后端要好玩很多，创意也多很多，不会像后端那么固定（增删改查😂）。
目前还是前端小白，心愿大家多多体谅，正在致力中。
纸上得来终觉浅，绝知此事要躬行。大家好，我是博主
宁在春：主页一名喜爱文艺却踏上编程这条路线的小青年。
心愿：
咱们，待别日相见时，都已有所成。
一个可恶的猫咪小表情，切实太可恶了，没方法抵御住引诱啊。