使用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动画(开启gpu加速)
Dec 23 HTML / CSS
老生常谈CSS中的长度单位
Jun 27 HTML / CSS
css3给背景图片加颜色遮罩的方法
Nov 05 HTML / CSS
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
Jun 09 HTML / CSS
html5 datalist标签使用示例(自动完成组件)
May 04 HTML / CSS
HTML5几个设计和修改的页面范例分享
Sep 29 HTML / CSS
HTML5有哪些新特征
Dec 01 HTML / CSS
深入解析HTML5 Canvas控制图形矩阵变换的方法
Mar 24 HTML / CSS
HTML5开发动态音频图的实现
Jul 02 HTML / CSS
面试必问:圣杯布局和双飞翼布局的区别
May 13 HTML / CSS
Html5大屏数据可视化开发的实现
Jun 11 HTML / CSS
CSS控制继承中的height能变为可继承吗
Jun 10 HTML / CSS
CSS实现切角+边框+投影+内容背景色渐变效果
纯CSS如何禁止用户复制网页的内容
CSS实现单选折叠菜单功能
CSS 一行代码实现头像与国旗的融合
如何利用 CSS Overview 面板重构优化你的网站
基于HTML十秒做出淘宝页面
css 边框添加四个角的实现代码
You might like
ThinkPHP3.1新特性之查询条件预处理简介
2014/06/19 PHP
WordPress中用于获取及自定义头像图片的PHP脚本详解
2015/12/17 PHP
php简单中奖算法(实例)
2017/08/15 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
用js+xml自动生成表格的东西
2006/12/21 Javascript
JS 自定义带默认值的函数
2011/07/21 Javascript
JavaScript Math 对象常用方法总结
2016/04/28 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
2016/06/13 Javascript
js判断iframe中元素是否存在的实现代码
2016/12/24 Javascript
javascript 产生随机数的几种方法总结
2017/09/26 Javascript
JS/jQuery实现DIV延时几秒后消失或显示的方法
2018/02/12 jQuery
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
2018/03/06 Javascript
如何在面试中手写出javascript节流和防抖函数
2020/10/22 Javascript
[00:37]2016完美“圣”典风云人物:AMS宣传片
2016/12/06 DOTA
学习python的几条建议分享
2013/02/10 Python
利用Python学习RabbitMQ消息队列
2015/11/30 Python
python中requests和https使用简单示例
2018/01/18 Python
python 连接各类主流数据库的实例代码
2018/01/30 Python
Python高级用法总结
2018/05/26 Python
Django中使用Celery的教程详解
2018/08/24 Python
python实现RabbitMQ的消息队列的示例代码
2018/11/08 Python
浅谈python脚本设置运行参数的方法
2018/12/03 Python
python实现windows壁纸定期更换功能
2019/01/21 Python
python字典排序的方法
2019/10/12 Python
python中p-value的实现方式
2019/12/16 Python
详解Python的爬虫框架 Scrapy
2020/08/03 Python
HTML5语音识别标签写法附图
2013/11/18 HTML / CSS
Reebok官方旗舰店:美国知名健身品牌锐步
2019/01/07 全球购物
马来西亚最大的在线隐形眼镜商店:MrLens
2019/03/27 全球购物
中文系师范生自荐信
2013/10/01 职场文书
怎么写自荐书范文
2014/02/12 职场文书
普通大学毕业生自荐信范文
2014/02/23 职场文书
大学社团活动总结
2014/04/26 职场文书
银行授权委托书范本
2014/10/04 职场文书
六一文艺汇演主持词
2015/06/30 职场文书
html中两种获取标签内的值的方法
2022/06/16 jQuery