使用CSS实现小三角边框原理解析
发布时间：2021-11-03 09:59:12 作者：佚名 
我要评论
我要评论本文给大家介绍如何把三角画出来，基于css代码实现小三角边框原理解析，感兴趣的朋友跟随小编一起看看吧
前言：
这个也是我最近学习才发现的一个细节，就是常常会在一些网站，看到下面图中这样的一个小三角，以前没怎么学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，说真的，感觉确实比后端要好玩很多，创意也多很多，不会像后端那么固定（增删改查😂）。
到此这篇关于使用CSS实现小三角边框原理解析的文章就介绍到这了,更多相关CSS 小三角边框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了通过CSS边框实现三角形和箭头的实例代码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2020-01-15- 下面的效果完全是用css 来实现的，那么是怎么实现的呢，我们知道 html 中有一些特殊的字符，通过特殊字符，利用 css 中的margin或者position方法完全可以实现以上效果，感2013-03-28
最新评论