使用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轻松实现清新 Loading 效果的简单实例
Jun 06 HTML / CSS
css3 伪元素和伪类选择器详解
Sep 04 HTML / CSS
用CSS3来实现社交分享按钮
Nov 11 HTML / CSS
使用CSS3编写类似iOS中的复选框及带开关的按钮
Apr 11 HTML / CSS
教你如何一步一步用Canvas写一个贪吃蛇
Oct 22 HTML / CSS
关于HTML5的安全问题开发人员需要牢记的
Jun 21 HTML / CSS
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
Jan 06 HTML / CSS
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
Apr 10 HTML / CSS
使用HTML5 Canvas为图片填充颜色和纹理的教程
Mar 21 HTML / CSS
HTML5 LocalStorage 本地存储刷新值还在
Mar 10 HTML / CSS
Html5新增标签有哪些
Apr 13 HTML / CSS
使用SVG实现提示框功能的示例代码
Jun 05 HTML / CSS
CSS实现切角+边框+投影+内容背景色渐变效果
纯CSS如何禁止用户复制网页的内容
CSS实现单选折叠菜单功能
CSS 一行代码实现头像与国旗的融合
如何利用 CSS Overview 面板重构优化你的网站
基于HTML十秒做出淘宝页面
css 边框添加四个角的实现代码
You might like
PHP脚本的10个技巧(7)
2006/10/09 PHP
将博客园(cnblogs.com)数据导入到wordpress的代码
2013/01/06 PHP
ThinkPHP3.1新特性之命名范围的使用
2014/06/19 PHP
php操作redis中的hash和zset类型数据的方法和代码例子
2014/07/05 PHP
thinkphp学习笔记之多表查询
2014/07/28 PHP
PHP迭代器和迭代的实现与使用方法分析
2018/04/19 PHP
js判断浏览器的比较全的代码
2007/02/13 Javascript
在IE6下发生Internet Explorer cannot open the Internet site错误
2010/06/21 Javascript
input禁止键盘及中文输入,但可以点击
2014/02/13 Javascript
Nodejs中调用系统命令、Shell脚本和Python脚本的方法和实例
2015/01/01 NodeJs
JavaScript的jQuery库插件的简要开发指南
2015/08/12 Javascript
Bootstrap每天必学之标签页(Tab)插件
2020/08/09 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
2016/09/17 Javascript
Bootstrap 实现查询的完美方法
2016/10/26 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
2017/06/27 Javascript
vue 登录滑动验证实现代码
2018/08/24 Javascript
NodeJS服务器实现gzip压缩的示例代码
2018/10/12 NodeJs
Android 自定义view仿微信相机单击拍照长按录视频按钮
2019/07/19 Javascript
layui radio点击事件实现input显示和隐藏的例子
2019/09/02 Javascript
Vue实现仿iPhone悬浮球的示例代码
2020/03/13 Javascript
[02:19]2018年度DOTA2最佳核心位选手-完美盛典
2018/12/17 DOTA
简单掌握Python中glob模块查找文件路径的用法
2016/07/05 Python
Python使用 Beanstalkd 做异步任务处理的方法
2018/04/24 Python
selenium+python实现1688网站验证码图片的截取功能
2018/08/14 Python
Python3的介绍、安装和命令行的认识(推荐)
2018/10/20 Python
Django配置MySQL数据库的完整步骤
2019/09/07 Python
Django搭建项目实战与避坑细节详解
2020/12/06 Python
美国正宗设计师眼镜在线零售商:EYEZZ
2019/03/23 全球购物
《学会合作》教学反思
2014/04/12 职场文书
环保建议书600字
2014/05/14 职场文书
师范生自荐信模板
2014/05/28 职场文书
测控技术自荐信
2014/06/05 职场文书
停车场管理协议书范本
2014/10/08 职场文书
python源码剖析之PyObject详解
2021/05/18 Python
MYSQL如何查看进程和kill进程
2022/03/13 MySQL
redis sentinel监控高可用集群实现的配置步骤
2022/04/01 Redis