zoukankan      html  css  js  c++  java
  • css 带箭头消息框样式

    1,先了解一下三角形的css

        .triangle_left {
                 0;
                height: 0;
                border-top: 70px solid transparent;
                border-right: 140px solid #6bbf20;
                border-bottom: 70px solid transparent;
            }
    
    
        <div class="triangle_left"></div>

    一个左三角就这样形成了。。

    下面来做做这个消息框了,左边那个框框简单,那么右边这个白底有边框的三角形怎么做的呢,我的思路是,将一个纯白色的三角形覆盖到有颜色的三角形上面并偏移一个象素

          .arrow {
                 100px;
                height: 40px;
                border: 1px solid #61BACB;
                border-radius: 5px;
                position: relative;
                margin:10px;
            }
    
            .t-right-n {
                display: block;
                 0;
                height: 0;
                border-top: 5px solid transparent;
                border-left: 8px solid #61BACB;
                border-bottom: 5px solid transparent;
                position: absolute;
                top: 13px;
                right: -8px;
                z-index: 0;
            }
    
            .t-right-n>span{
                display: block;
                 0;
                height: 0;
                border-top: 5px solid transparent;
                border-left: 8px solid #ffffff;
                border-bottom: 5px solid transparent;
                position: absolute;
                top: -5px;
                right: 1px;
                z-index: 1;
            }
    
        <div class="arrow">
            <span class="t-right-n"><span></span></span>
        </div>
        
  • 相关阅读:
    053389
    053388
    053387
    053386
    053385
    Docker简单部署Ceph测试集群
    docker部署Ceph分布式存储集群
    PIC单片机开发环境MPLAB X IDE
    MPLAB X安装,PIC单片机开发环境的搭建记录。
    MPLAB X IDE开发环境
  • 原文地址:https://www.cnblogs.com/pfcan66/p/9109456.html
Copyright © 2011-2022 走看看