CSS之三角形的奥妙
参考链接:
https://www.jianshu.com/p/9a463d50e441
1. 实现原理
<div></div>div {width: 50px;height: 50px;border: 2px solid orange;
}
这是我们使用border的常规代码——往往只给border一个较小的宽度(通常为1-2px);然而这样的日常用法就会容易让大家对border的形成方式产生误解,即认为元素的border是由四个矩形边框拼接而成。
然而事实并不是这样。实际上,元素的border是由三角形组合而成,为了说明这个问题,我们可以增大border的宽度,并为各border边设置不同的颜色:
div {width: 50px;height: 50px;border: 40px solid;border-color: orange blue red green;
}
如果元素的内容尺寸设置为0会发生什么情况呢?
div {width: 0;height: 0;border: 40px solid;border-color: orange blue red green;
}
综上,我们将惊奇地发现,四边的border实际是由上下左右4个三角形“拼接”而成
2. 各种三角形的实现
2.1 等腰三角形
根据上面的结论,我们只需要把把需要显示的某个方向的border设置成指定颜色,其它方向border的颜色设置为白色或透明色即可(盒子宽度为0):
div {width: 0;height: 0;/*三角形箭头冲向哪里,该方向的border-width为0,其他方向不为0*/border-width: 0 100px 100px 100px;border-style: solid;/* 不需要的方向的颜色为transparent*/border-color: transparent transparent red transparent ;
}
2.2 直角三角形
在2.1等腰三角形的基础上实现直角三角形,只需要把等腰三角形的不需要的某一方向的部分的border-width设置为0即可:
div {width: 0;height: 0;/*三角形箭头冲向哪里,该方向的border-width为0,其他方向不为0*//*实现直角三角形,不需要的那一部分的该方向的border-width为0*/border-width: 0 0 100px 100px;border-style: solid;/* 不需要的方向的颜色为transparent*/border-color: transparent transparent red transparent ;
}
2.3 带边框的三角形
由于不能继续通过为已有三角形设置border的方法来为其设置边框(因为三角形本身就是利用border实现的),所以只好另想办法。而能想到的一个最自然的方法就是三角形叠放,即把当前三角形叠放在更大的三角形上方,上图所示的实现方法就是把黄色三角形放在了尺寸更大的蓝色三角形上。
代码示例:
<div id="blue"><div>/*下面的较大的蓝色三角形*/
#blue {position:relative;width: 0;height: 0;border-width: 0 40px 40px;border-style: solid;border-color: transparent transparent blue;
}/*上面的较小的黄色三角形*/
#blue:after {content: "";position: absolute;top: 1px;left: -38px;border-width: 0 38px 38px;border-style: solid;border-color: transparent transparent yellow;
}
2.4 对比进度条
通过直角三角形,定位以及伪元素的结合可以实现类似如下类型的对比进度条效果
*,::before,::after{box-sizing: border-box;}.container{width: 500px;height: 50px;background-color: red;}.left{width: calc(50% - 25px);height: 100%;background-color: yellow;position: relative;}/*直角三角形模拟斜线效果*/.left::after{position: absolute;top:0;content:'';right: -25px;width: 0;height: 0;/*修改对应方向的border-width大小可改变三角形的斜度*/border-width: 0 25px 50px 25px;border-style: solid;border-color: transparent transparent yellow transparent;}
CSS之三角形的奥妙相关推荐
- css画横线箭头_用CSS绘制三角形箭头
用CSS绘制三角形箭头.使用纯CSS,你只需要很少的代码就可以创作出各种浏览器都兼容的三角形箭头! CSS代码:/* create an arrow that points up */ div.arr ...
- 纯 CSS 实现三角形尖角箭头的实例
为什么80%的码农都做不了架构师?>>> 上次无意中发现了个使用纯 CSS 实现三角形尖角箭头的方法 http://blog.csdn.net/zhouzme/article/ ...
- 06. 用css实现三角形
用css实现三角形 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
- html css右下角三角形,纯CSS绘制三角形(各种角度)
CSS/HTML 的 纯CSS绘制三角形(各种角度) 我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 C ...
- css 绘制三角形_解释CSS形状:如何使用纯CSS绘制圆,三角形等
css 绘制三角形 Before we start. If you want more free content but in video format. Don't miss out on my Y ...
- html div三角形,【div】纯CSS绘制三角形
原标题:[div]纯CSS绘制三角形 我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使 ...
- css空心三角形_(12)把“可以动的盒子”更优雅地展示: “伪元素”妙用 | CSS...
原创:itsOli @前端一万小时 本文版权归作者所有,未经授权,请勿转载! 本文节选自"语雀"私有付费专栏「前端一万小时 | 从零基础到轻松就业」 1. 如何使用伪元素来清除浮动 ...
- html css拖拽设计,css绘制三角形 和 HTML拖拽事件
利用css制作三角形 利用设置边框的三个边的长度和border实现三角形设置,并隐藏其他边 例子:#yz3{ display: inline-block; 0; height: 0; border-t ...
- 制作京东快递查询 css制作三角形
这是我学习前端道路上制作的一个小案例,想把这些记下来,记录我的学习经历和更加熟练的掌握代码..这个案例是当我们在下面输入数字时上面的盒子会放大的显示出来,效仿的是京东快递查询单号.好了,废物不多说,上 ...
最新文章
- 回调函数与PHP实例
- VBScript学习笔记 - 数组
- 凝聚式层次聚类 java_凝聚法层次聚类之ward linkage method
- js 有关object 、array 等引用类型的赋值问题
- 画出计算机网络的一般组成,计算机网络习题(有答案).pdf
- 【原生JS组件】javascript 运动框架
- python生成范围内随机数_如何使用Python中的pareto分布在specyfic范围内生成随机数...
- URAL 1086 Cryptography
- 【刷题】BZOJ 3926 [Zjoi2015]诸神眷顾的幻想乡
- 翻译连载 | 附录 C:函数式编程函数库-《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇...
- 手工删除oracle的方法
- D3.js学习(二)
- 汇编程序:成绩分段统计
- 【推荐】开源领袖陆首群力作:什么是数字经济?
- Share:思科模拟器 路由配置(默认、静态、动态RIP)
- 苹果XS怎么截屏_iPhoneXR 到底怎么样?真香 还是真烂?
- 618当天,90%的程序员在干什么?
- Docker网桥模式ping不通宿主机
- 虚拟机安装Windows11正式版
- 开发者账号注册的详细流程