使用CSS实现小三角边框原理解析

前言：

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

我是最近才开始认真学的前端，比纯小白稍微懂的稍微多一点点。

文章如若有那些不足之处，请及时指出，在此郑重感谢。

一、css三角做法

我们先简单ca178说一下，如何把三角画出来，懂用什么画的之后，基本就完事了。

html代码：

<div class="sanjiao"></div>

css代码长城片尾曲：

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

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

页面展示效果就是一个四个小三角拼成的正方形。

原理是什么呢？

盒子每一边的边框都是梯形的，盒子大小为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: 1求半圆的周长0px solid transparent;    /* 再进行下面的设置，这样之后就会出现一个紫色向上的一个小三角*/    border-bottom: 10px solid #e1bee7;    position: absolute;    兔子的外形描写left: 80px;    top: -10px;}</style>

最后的成果大致如下：

css这个边框还有很多可以玩，还在学习中…

三、自言自语

最近在学css，说真的，感觉确实比后端要好玩很多，创意也多很多，不会像后端那么固定（增删改查）。

到此这篇关于使用css实现小三角边框原理解析的文章就介绍到这了,更多相关css 小三角边框内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章，希望大家以后多多支持www.887551.com！