• 纯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智障)。

       

        

  • 相关阅读:
    密钥学习
    MAP的计算方法(简单总结)
    模型量化技术(入门级理解,不涉及复杂公式和深入的原理)
    实现java非阻塞http请求的两种方式
    PIP安装软件报错:“ERROR: Could not install packages due to an EnvironmentError: HTTPSConnectionPool(host='files.pythonhosted.org', port=443)”
    Fiddler弱网测试
    Fiddler断点应用
    Fiddler基本介绍
    Fiddler安装及证书配置教程(Windows)
    URL统一资源定位符
  • 原文地址:https://www.cnblogs.com/cleaverlove/p/6371796.html
Copyright © 2020-2023  润新知