zoukankan      html  css  js  c++  java
  • 纯css写带小三角对话框

    在实际样式中经常会遇到要写类似对话框的样式,而这种样式往往会有一个小三角,如下所示:

    示例图片

    那么如何用css写出来呢,其实很简单,先让父元素相对定位,然后运用css的伪类before或after。就可以写个三角形,如果想要带边框的三角形,则可以两个重叠使用。代码如下:

    <div class="box2">
        纯css写带小三角对话框
    </div>
    
    .box2{  
        float:left;  
        position:relative;  
        200px;  
        height:100px;  
        border:1px solid #00f;  
        margin:50px;  
        box-sizing:border-box;  
        font-size:14px;  
        padding:10px;  
        box-shadow:0 0 2px rgba(0,0,0,.5)  
    }  
    .box2:before,
    .box2:after{  
        position:absolute;  
        content:'';
        border:10px solid;
    }  
    .box2:before{  
        right: -20px;
        top:20px;
        border-color: transparent transparent transparent #00f;
    }  
    .box2:after{  
        border-color: transparent transparent transparent #fff;
        right: -18px;
        top: 20px;
    }  
    
  • 相关阅读:
    NOIP2018游记-DAY1
    NOIP2018游记-DAY0
    18.11.7绍一模拟赛
    [SPOJ]SELTEAM
    18.11.5绍一模拟赛
    18.11.2绍一模拟赛
    [模拟赛]世界杯
    [模拟赛]路途
    乘法逆元的研究
    子查询,TOP_N,分页,行转列
  • 原文地址:https://www.cnblogs.com/dxzg/p/8279135.html
Copyright © 2011-2022 走看看