使用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媒体查询(Media Queries)介绍
Sep 12 HTML / CSS
css3 position fixed固定居中问题解决方案
Aug 19 HTML / CSS
实列教程 一款基于jquery和css3的响应式二级导航菜单
Nov 13 HTML / CSS
CSS实现定位元素居中的方法
Jun 23 HTML / CSS
详解CSS3中的box-sizing(content-box与border-box)
Apr 19 HTML / CSS
html5的localstorage详解
May 09 HTML / CSS
使用HTML5 IndexDB存储图像和文件的示例
Nov 05 HTML / CSS
canvas实现有递增动画的环形进度条的实现方法
Jul 10 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(一)
Jan 21 HTML / CSS
html5绘制时钟动画
Dec 15 HTML / CSS
使用canvas实现黑客帝国数字雨效果
Jan 02 HTML / CSS
如何用H5实现好玩的2048小游戏
Jul 23 HTML / CSS
CSS实现切角+边框+投影+内容背景色渐变效果
纯CSS如何禁止用户复制网页的内容
CSS实现单选折叠菜单功能
CSS 一行代码实现头像与国旗的融合
如何利用 CSS Overview 面板重构优化你的网站
基于HTML十秒做出淘宝页面
css 边框添加四个角的实现代码
You might like
探究Laravel使用env函数读取环境变量为null的问题
2016/12/06 PHP
优化 JavaScript 代码的方法小结
2009/07/16 Javascript
js自动生成对象的属性示例代码
2013/10/28 Javascript
如何通过javascript操作web控件的自定义属性
2013/11/25 Javascript
浅谈Node.js中的定时器
2015/06/18 Javascript
jQuery平滑旋转幻灯片特效代码分享
2015/09/07 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
2017/03/10 Javascript
jQuery插件之validation插件
2017/03/29 jQuery
React 高阶组件入门介绍
2018/01/11 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
2018/01/31 Javascript
javascript刷新父页面方法汇总详解
2019/10/10 Javascript
Vue Router 实现动态路由和常见问题及解决方法
2020/03/06 Javascript
JavaScript图片旋转效果实现方法详解
2020/06/28 Javascript
详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)
2020/07/11 Javascript
Python获取apk文件URL地址实例
2013/11/01 Python
使用Python多线程爬虫爬取电影天堂资源
2016/09/23 Python
python线程池(threadpool)模块使用笔记详解
2017/11/17 Python
python方向键控制上下左右代码
2018/01/20 Python
Python使用 Beanstalkd 做异步任务处理的方法
2018/04/24 Python
Django 多对多字段的更新和插入数据实例
2020/03/31 Python
python 写函数在一定条件下需要调用自身时的写法说明
2020/06/01 Python
python try...finally...的实现方法
2020/11/25 Python
python 使用xlsxwriter循环向excel中插入数据和图片的操作
2021/01/01 Python
使用CSS3编写灰阶滤镜来制作黑白照片效果的方法
2016/05/09 HTML / CSS
详解HTML5 canvas绘图基本使用方法
2018/01/29 HTML / CSS
实例教程 利用html5和css3打造一款创意404页面
2014/10/20 HTML / CSS
Soft Cotton捷克:来自爱琴海棉花的浴袍
2017/02/01 全球购物
统计每一学生的平均成绩
2014/06/06 面试题
十佳美德少年事迹材料
2014/02/05 职场文书
文科生自我鉴定
2014/02/15 职场文书
大型会议接待方案
2014/03/01 职场文书
行政人事专员岗位职责
2014/03/05 职场文书
项目合作协议书范本
2014/04/16 职场文书
武当山导游词
2015/02/03 职场文书
Python3 类型标注支持操作
2021/06/02 Python
JS封装cavans多种滤镜组件
2022/02/15 Javascript