使用CSS实现小三角边框原理解析
程序员文章站
2022-06-10 10:42:58
前言:这个也是我最近学习才发现的一个细节,就是常常会在一些网站,看到下面图中这样的一个小三角,以前没怎么学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 小三角边框内容请搜索以前的文章或继续浏览下面的相关文章,希望大家以后多多支持!
推荐阅读