纯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制作空心三角形和实心三角形及其实现原理的更多相关文章

  1. 用css制作空心箭头(上下左右各个方向均有)

    平常在网页中,经常会有空心箭头,除了用图片外,可以用css来实现.基本思路是,用css绘制两个三角形,通过绝对定位让两三角形不完全重叠,例如制作向右的空心箭头,位于前面的三角形border颜色是需要的 ...

  2. 纯CSS制作水平垂直居中“十字架”

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 纯CSS制作三角(转)

    原原文地址:http://www.w3cplus.com/code/303.html 原文地址:http://blog.csdn.net/dyllove98/article/details/89670 ...

  4. 如何使用纯 CSS 制作四子连珠游戏

    序言:你是否想过单纯使用 CSS 也可以制作一款游戏?甚至可以双人对决!这是一篇非常有趣的文章,作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法.因为案例本身比较 ...

  5. 如何使用纯CSS制作特效导航条?

    先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...

  6. No.5 - 纯 CSS 制作绕中轴旋转的立方体

    body{ background-color: #000; margin:; padding:; } main{ perspective: 800px; } .cube{ transform-styl ...

  7. 每日CSS_纯CSS制作进度条

    每日CSS_纯CSS制作进度条 2020_12_26 源码 1. 代码解析 1.1 html 代码解析 设置整个容器 <div class="container"> . ...

  8. 追求极致--纯css制作三角、圆形按钮,兼容ie6

    参考了天猫.微博等网站的做法,用纯html和css实现,效果还是不错的.以下是成果,兼容主流浏览器,包括ie6. <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  9. 纯CSS制作加<div>制作动画版哆啦A梦

    纯CSS代码加上<div>制作动画版哆啦A梦(机器猫) 哆啦A梦(机器猫)我们大家一定都很熟悉,今天给大家演示怎么用纯CSS代码,来做一个动画版的哆啦A梦. 效果图: ###下面代码同学可 ...

随机推荐

  1. Liferay OSGi注解(Annotation) - 使用手册(译文)

    mark过来好好用 上Neil的博客地址Liferay OSGi注解(Annotation) - 使用手册(译文) @Component是注入服务 @Reference是获取服务(在Liferay框架 ...

  2. thinkphp5.0 composer安装phpmailer

    1.安装:composer require phpmailer/phpmailer 2.引入:use PHPMailer\PHPMailer\PHPMailer: 3.调用:$mail = new P ...

  3. git push的时候每次都要输入用户名和密码的问题解决

    换了个ssh key,发现每次git push origin master的时候都要输入用户名和密码 原因是在添加远程库的时候使用了https的方式..所以每次都要用https的方式push到远程库 ...

  4. C++四:继承与派生

    C++四:继承与派生 一.概念    继承就是从先辈处得到属性和行为特性.类的继承,是指新的类从已有类的那里得到的特性.类的派生,就是指已有类产生新类的过程. 二.应用 定义为 class 派生类名: ...

  5. 使用DECLARE定义条件和处理程序

    定义条件和处理程序是事先定义程序执行过程中可能遇到的问题,并且可以在处理程序中定义解决这些问题的办法,可以简单理解 为异常处理,这种方式可以提前预测可能出现的问题,并提出解决办法,从而增强程序健壮性. ...

  6. async/await运用-前端表单弹窗验证同步书写方式(React)

    在前端项目中,我们经常会碰到这样的场景: 当前我们有一个表单需要填写,在完成表单填写后经过校验之后会弹出短信或者其他形式验证码,进行补充校验,然后一起提交给接口. 场景如下图: 当前为创建操作,编辑操 ...

  7. 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 ...

  8. Mysql查询某个月的每一天的数据

    需求:查询最近三个月的每一天的业绩总和 因为最近三个月每个月的天数是不一样,所以不能用这篇文章:Mysql查询最近30天的数据(每天的业绩总和数据) 介绍的用固定多少天去查数据.需要一个新方法. 一. ...

  9. 如何减少idea的内存消耗

    如何减少idea的内存消耗 标签: idea 内存 内存泄露 异常 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/u014028392/articl ...

  10. Hbase架构与实现