css空心三角形_纯CSS制作空心三角形和实心三角形及其实现原理
纯CSS制作空心三角形和实心三角形及其实现原理
在一次项目中需要使用到空心三角形,我瞬间懵逼了。查阅了一些资料加上自己的分析思考,终于是达到了效果,个人感觉制作三角形是使用频率很高的,因此记录下来,供以后查阅参考。达到了效果如图:
DOM结构如图:
CSS代码如下:
1 /*给矩形一个1px实心颜色rgb为#E4E4E2的边框*/
2 .dynamicTime{
3 width:125px;
4 height:40px;
5 border:1px solid #E4E4E2;
6 margin-left:20px;
7 position:relative;
8 display:inline-block;
9 vertical-align:middle;
10 }
11 /*上下透明,右边框为10px*/
12 .dynamicTime:before{
13 content:'';
14 position:absolute;
15 top:10px;
16 left:-10px;
17 width:0;
18 height:0;
19 border-right:10px solid #E4E4E2;
20 border-bottom:10px solid transparent;
21 border-top:10px solid transparent;
22 }
23 /*上下透明,右边框为9px且在:before伪元素三角形的基础上,向右,下移动了1px*/
24 .dynamicTime:after{
25 content:'';
26 position:absolute;
27 top:11px;
28 left:-9px;
29 width:0;
30 height:0;
31 border-bottom:9px solid transparent;
32 border-right:9px solid #fff;
33 border-top:9px solid transparent;
34 }
为便于写出方向向上下左右的空心三角形,我分别写出了各个方向的空心三角形,分析思考其中的实现原理。现总结如下:①空心三角原理:主要利用伪元素(:before,:after)实现, :before产生的是一个实心的#E4E4E2的三角形,而after产生的是实心的白色的三角形,将其覆盖。因此三角形线的粗细是由覆盖了多少决定的,即二者left,top的差值(特别注意:向左的空心三角形需要同时向右和下移,如上例子,向右的空心三角形需要同时向左和下移。向上的空心三角形只需要向下移就可以了,向下的空心三角形同理),border的四个方向的值大小只改变角度大小,不改变线的粗细。感兴趣的可以自己参考我的总结,自己动手测试,感受会更加深刻。
那么实心的三角形怎么做呢? 其实实心三角形的CSS代码,只需将相应方向的三角形样式的after伪类删除,即可得到实心三角形.如我需要向左的实心三角形:
1 .dynamicTime{
2 width:125px;
3 height:40px;
4 border:1px solid #E4E4E2;
5 margin-left:20px;
6 position:relative;
7 }
8 .dynamicTime:before{
9 content:'';
10 position:absolute;
11 top:10px;
12 left:-10px;
13 width:0;
14 height:0;
15 border-right:10px solid #E4E4E2;
16 border-bottom:10px solid transparent;
17 border-top:10px solid transparent;
18 }
这样就OK了, 是不是很简单。哈哈哈哈。。。。。。。(心理活动:MD智障)。
css空心三角形_纯CSS制作空心三角形和实心三角形及其实现原理相关推荐
- css加号图标_纯CSS制作各种各样的网页图标(三角形、暂停按钮、下载箭头、加号等)...
三角形 .box{ width: 0; height: 0; border-top: 50px solid transparent; border-bottom: 50px solid transpa ...
- css 科技 边框_纯css制作带三角的边框(附效果图)
首先附上效果图: 以上的效果完全是用 css 来实现的,那么是怎么实现的呢? 我们知道 html 中有一些特殊的字符,具体的请点击 HTML特殊字符大全. 通过特殊字符,利用 css 中的 margi ...
- html三角形图标,纯css三角形和css三角箭头实例代码
css箭头实例demo 纯css三角形和css三角箭头,可以随意放大缩小,可以随意颜色,这要比图片实现的三角箭头或者三角形状要灵活的多. 本文的Demo和源代码已放到GitHub,如果您觉得本篇内容不 ...
- html5制作天气动画背景,CSS icon图标之纯CSS实现带动画效果的天气图标
CSS3动画属性并不是很多,但重点其实是你怎样去运用它,从简单的hover状态或复杂的小动画,都可以巧妙的用CSS3动画属性来实现. 今天主要是和大家分享一个比较有创意.实用的CSS天气图标动画,静态 ...
- [css] 能不能使用纯css使你的浏览器卡死?怎么实现?
[css] 能不能使用纯css使你的浏览器卡死?怎么实现? 可以,用计算属性calc,变量 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论 主目录 与 ...
- CSS 魔法系列:纯 CSS 绘制各种图形《系列五》
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
- css动画怎么暂停,纯CSS方式实现CSS动画的暂停与播放!
使用纯 CSS 的方法,能否暂停.播放 CSS 动画?看起来不可能,至少很麻烦. 我们知道,在 CSS3 animation 中,有这样一个属性可以暂停.播放动画: { animation-play- ...
- css 实现一个尖角_纯 CSS 实现三角形尖角箭头的实例
上次无意中发现了个使用纯 CSS 实现三角形尖角箭头的方法 ,但没有怎么用上,也没有详细完整的实例,今天刚好要用上,整理了下,写个完整的代码: 无标题文档 .area { margin:100px a ...
- java写三角形圆矩形_纯CSS画的基本图形(矩形、圆形、三角形、多边形、爱心、八卦等)...
图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦等.当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome, ...
最新文章
- R循环函数(for、while、break、next)
- thinkphp两表联查并且分页
- IOS客户端Coding项目记录(二)
- php 循环 显示 图片,thinkphp 循环显示图片问题!!!~~~~
- OpenVSLAM:日本先进工业科技研究所新开源视觉SLAM框架
- VS恢复调试时出现的确认对话框
- 测试开发字节跳动(二面),我被面试官按在地上摩擦!
- kylin_异常_02_java.lang.NoClassDefFoundError: org/apache/hadoop/hive/conf/HiveConf 解决办法
- 匹配数据库 帆软 查询条件_帆软报表学习笔记①——根据参数查询
- SQL server不允许保存更改
- ubuntu16.04便捷使用(常用工具、常用快捷键、常用使用教程)
- find_calib_object算子说明
- 基于IS-LM模型的宏观经济政策成效分析:弹性视角
- 教你如何在交换机上查询并看懂光模块DDM信息
- C语言getc函数没错不管用,对比C语言中getc()函数和ungetc()函数的使用
- 21届秋招ATL宁德新能源一面面经[数据分析工程师]
- Python 基于tkinter和sqlite3的会员管理系统
- requirejs的缺点
- k-中心点算法(k-medoids)及Matlab代码实现
- iOS-BlurEffect模糊效果总结
热门文章
- 工业人工智能及应用研究现状及展望
- 那门用Python讲授的程序设计课程能带给学生什么
- 解决VS2022打开VS2015项目出现报错(warning : 无法找到 Visual Studio 2015 - Windows XP (v140_xp) 的生成工具……)
- linux 安装与卸载ProFTPd
- 湖州智慧社保显示服务器繁忙,湖州智慧社保
- Loadrunner11录制含有Ajax请求页面的处理方法
- 对摄影术语(及其在光线追踪的应用)的简要概括
- python练习:简单火柴人游戏
- 惜我者,我惜之; 冷我者,我弃之
- C语言学习笔记(3)函数