纯CSS制作空心三角形和实心三角形及其实现原理
纯CSS制作空心三角形和实心三角形及其实现原理
在一次项目中需要使用到空心三角形,我瞬间懵逼了。查阅了一些资料加上自己的分析思考,终于是达到了效果,个人感觉制作三角形是使用频率很高的,因此记录下来,供以后查阅参考。达到了效果如图:
DOM结构如图:
CSS代码如下:
/* 给矩形一个1px实心颜色rgb为#E4E4E2的边框 */
.dynamicTime {
width: 125px;
height: 40px;
border: 1px solid #E4E4E2;
margin-left: 20px;
position: relative;
display: inline-block;
vertical-align: middle;
}
/* 上下透明,右边框为10px */
.dynamicTime:before {
content: '';
position: absolute;
top: 10px;
left: -10px;
width:;
height:;
border-right: 10px solid #E4E4E2;
border-bottom: 10px solid transparent;
border-top: 10px solid transparent;
}
/* 上下透明,右边框为9px且在:before伪元素三角形的基础上,向右,下移动了1px */
.dynamicTime:after {
content: '';
position: absolute;
top: 11px;
left: -9px;
width:;
height:;
border-bottom: 9px solid transparent;
border-right: 9px solid #fff;
border-top: 9px solid transparent;
}
为便于写出方向向上下左右的空心三角形,我分别写出了各个方向的空心三角形,分析思考其中的实现原理。现总结如下:①空心三角原理:主要利用伪元素(:before,:after)实现, :before产生的是一个实心的#E4E4E2的三角形,而after产生的是实心的白色的三角形,将其覆盖。因此三角形线的粗细是由覆盖了多少决定的,即二者left,top的差值(特别注意:向左的空心三角形需要同时向右和下移,如上例子,向右的空心三角形需要同时向左和下移。向上的空心三角形只需要向下移就可以了,向下的空心三角形同理),border的四个方向的值大小只改变角度大小,不改变线的粗细。感兴趣的可以自己参考我的总结,自己动手测试,感受会更加深刻。
那么实心的三角形怎么做呢? 其实实心三角形的CSS代码,只需将相应方向的三角形样式的after伪类删除,即可得到实心三角形.如我需要向左的实心三角形:
.dynamicTime {
width: 125px;
height: 40px;
border: 1px solid #E4E4E2;
margin-left: 20px;
position: relative;
}
.dynamicTime:before {
content: '';
position: absolute;
top: 10px;
left: -10px;
width:;
height:;
border-right: 10px solid #E4E4E2;
border-bottom: 10px solid transparent;
border-top: 10px solid transparent;
}
这样就OK了, 是不是很简单。哈哈哈哈。。。。。。。(心理活动:MD智障)。
纯CSS制作空心三角形和实心三角形及其实现原理的更多相关文章
- 用css制作空心箭头(上下左右各个方向均有)
平常在网页中,经常会有空心箭头,除了用图片外,可以用css来实现.基本思路是,用css绘制两个三角形,通过绝对定位让两三角形不完全重叠,例如制作向右的空心箭头,位于前面的三角形border颜色是需要的 ...
- 纯CSS制作水平垂直居中“十字架”
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 纯CSS制作三角(转)
原原文地址:http://www.w3cplus.com/code/303.html 原文地址:http://blog.csdn.net/dyllove98/article/details/89670 ...
- 如何使用纯 CSS 制作四子连珠游戏
序言:你是否想过单纯使用 CSS 也可以制作一款游戏?甚至可以双人对决!这是一篇非常有趣的文章,作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法.因为案例本身比较 ...
- 如何使用纯CSS制作特效导航条?
先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...
- No.5 - 纯 CSS 制作绕中轴旋转的立方体
body{ background-color: #000; margin:; padding:; } main{ perspective: 800px; } .cube{ transform-styl ...
- 每日CSS_纯CSS制作进度条
每日CSS_纯CSS制作进度条 2020_12_26 源码 1. 代码解析 1.1 html 代码解析 设置整个容器 <div class="container"> . ...
- 追求极致--纯css制作三角、圆形按钮,兼容ie6
参考了天猫.微博等网站的做法,用纯html和css实现,效果还是不错的.以下是成果,兼容主流浏览器,包括ie6. <!DOCTYPE html PUBLIC "-//W3C//DTD ...
- 纯CSS制作加<div>制作动画版哆啦A梦
纯CSS代码加上<div>制作动画版哆啦A梦(机器猫) 哆啦A梦(机器猫)我们大家一定都很熟悉,今天给大家演示怎么用纯CSS代码,来做一个动画版的哆啦A梦. 效果图: ###下面代码同学可 ...
随机推荐
- Liferay OSGi注解(Annotation) - 使用手册(译文)
mark过来好好用 上Neil的博客地址Liferay OSGi注解(Annotation) - 使用手册(译文) @Component是注入服务 @Reference是获取服务(在Liferay框架 ...
- thinkphp5.0 composer安装phpmailer
1.安装:composer require phpmailer/phpmailer 2.引入:use PHPMailer\PHPMailer\PHPMailer: 3.调用:$mail = new P ...
- git push的时候每次都要输入用户名和密码的问题解决
换了个ssh key,发现每次git push origin master的时候都要输入用户名和密码 原因是在添加远程库的时候使用了https的方式..所以每次都要用https的方式push到远程库 ...
- C++四:继承与派生
C++四:继承与派生 一.概念 继承就是从先辈处得到属性和行为特性.类的继承,是指新的类从已有类的那里得到的特性.类的派生,就是指已有类产生新类的过程. 二.应用 定义为 class 派生类名: ...
- 使用DECLARE定义条件和处理程序
定义条件和处理程序是事先定义程序执行过程中可能遇到的问题,并且可以在处理程序中定义解决这些问题的办法,可以简单理解 为异常处理,这种方式可以提前预测可能出现的问题,并提出解决办法,从而增强程序健壮性. ...
- async/await运用-前端表单弹窗验证同步书写方式(React)
在前端项目中,我们经常会碰到这样的场景: 当前我们有一个表单需要填写,在完成表单填写后经过校验之后会弹出短信或者其他形式验证码,进行补充校验,然后一起提交给接口. 场景如下图: 当前为创建操作,编辑操 ...
- deepin 15.11 升级docker-ce 18.01到19.03.1,升级docker compose 1.23到1.24.1
1.升级docker compose ,docker官方安装方法 $ sudo curl -L "https://github.com/docker/compose/releases/dow ...
- Mysql查询某个月的每一天的数据
需求:查询最近三个月的每一天的业绩总和 因为最近三个月每个月的天数是不一样,所以不能用这篇文章:Mysql查询最近30天的数据(每天的业绩总和数据) 介绍的用固定多少天去查数据.需要一个新方法. 一. ...
- 如何减少idea的内存消耗
如何减少idea的内存消耗 标签: idea 内存 内存泄露 异常 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u014028392/articl ...
- Hbase架构与实现