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


Posted in HTML / CSS onNovember 07, 2021

前言:

这个也是我最近学习才发现的一个细节,就是常常会在一些网站,看到下面图中这样的一个小三角,以前没怎么学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;
}

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

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

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

原理是什么呢?

盒子每一边的边框都是梯形的,盒子大小为0时,梯形上底(边框内边)也为0,所以两边会合并成三角形。

原理图大致就如下:

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

当最后它中间的盒子宽度、高度都为零,就成了角形。

二、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 小三角边框内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
利用CSS3的flexbox实现水平垂直居中与三列等高布局
Sep 12 HTML / CSS
CSS3 Flexbox中flex-shrink属性的用法示例介绍
Dec 30 HTML / CSS
css sprite简单实例
May 23 HTML / CSS
CSS3 实现弹幕的示例代码
Aug 07 HTML / CSS
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
Sep 15 HTML / CSS
CSS3实现全景图特效示例代码
Mar 26 HTML / CSS
10分钟入门CSS3 Animation
Dec 25 HTML / CSS
用html5实现语音搜索框的方法
Mar 18 HTML / CSS
HTML5 创建canvas元素示例代码
Jun 04 HTML / CSS
针对HTML5的Web Worker使用攻略
Jul 12 HTML / CSS
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
May 18 HTML / CSS
简洁自适应404页面HTML好看的404源码
Dec 16 HTML / CSS
CSS实现切角+边框+投影+内容背景色渐变效果
纯CSS如何禁止用户复制网页的内容
CSS实现单选折叠菜单功能
CSS 一行代码实现头像与国旗的融合
如何利用 CSS Overview 面板重构优化你的网站
基于HTML十秒做出淘宝页面
css 边框添加四个角的实现代码
You might like
php addslashes和mysql_real_escape_string
2010/01/24 PHP
rephactor 优秀的PHP的重构工具
2011/06/09 PHP
php生成PDF格式文件并且加密
2015/06/22 PHP
javascript 客户端验证上传图片的大小(兼容IE和火狐)
2009/08/15 Javascript
javascript事件问题
2009/09/05 Javascript
JavaScript聚焦于第一个字段的代码
2010/10/15 Javascript
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
2010/11/28 Javascript
jquery animate图片模向滑动示例代码
2011/01/26 Javascript
jquery表格内容筛选实现思路及代码
2013/04/16 Javascript
jQuery表格插件ParamQuery简单使用方法示例
2013/12/05 Javascript
JavaScript模拟实现继承的方法
2015/03/30 Javascript
纯javascript代码实现计算器功能(三种方法)
2015/09/07 Javascript
js中最容易被忽视的事件问题大总结
2016/05/15 Javascript
JavaScript选择排序算法原理与实现方法示例
2018/08/06 Javascript
vue interceptor 使用教程实例详解
2018/09/13 Javascript
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
2019/12/12 Javascript
taro 实现购物车逻辑的实例代码
2020/06/05 Javascript
[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访
2014/07/10 DOTA
[41:41]TFT vs Secret Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
[51:06]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第二场 1月26日
2021/03/11 DOTA
python文件与目录操作实例详解
2016/02/22 Python
Python存取XML的常见方法实例分析
2017/03/21 Python
Python利用pandas计算多个CSV文件数据值的实例
2018/04/19 Python
对Python3 序列解包详解
2019/02/16 Python
Python中typing模块与类型注解的使用方法
2019/08/05 Python
Tensorflow:转置函数 transpose的使用详解
2020/02/11 Python
Python求两个字符串最长公共子序列代码实例
2020/03/05 Python
matplotlib交互式数据光标实现(mplcursors)
2021/01/13 Python
使用css3和jquery实现可伸缩搜索框
2014/02/12 HTML / CSS
寻找迷宫的一条出路,o通路;X:障碍
2016/07/10 面试题
运动会稿件200字
2014/02/07 职场文书
交通事故协议书范文
2014/04/16 职场文书
彩色的翅膀教学反思
2014/04/25 职场文书
会计求职信
2014/05/29 职场文书
拉贝日记观后感
2015/06/05 职场文书
《詹天佑》教学反思
2016/02/20 职场文书