• css镂空三角形样式


    前言

    对话框----镂空三角形样式

    原理

    1)利用伪元素 :before :after

    2):before ,border做出大三角形样式

    3):after,border做出小三角形样式

    4)小三角形的白色样式遮住大三角形样式,形成镂空

    镂空三角形

    html

    <div id="talkTop">
      顶部镂空三角形
    </div>
    <div id="talkBottom">
      底部镂空三角形
    </div>
    <div id="talkLeft">
      左边镂空三角形
    </div>
    <div id="talkRight">
      右边镂空三角形
    </div>
    

    css样式

    #talkTop,
    #talkBottom,
    #talkLeft,
    #talkRight{
      120px;
      height:40px;
      margin:60px;
      line-height:40px;
      text-aligin:center;
      position:relative;
      -moz-border-radius:10px;
      -webkit-border-radius:10px;
      border-radius:10px;
      border-radius:1px solid #808080;
      background-color:#fff;
    }
    
    
    /*talkBottom*/
    #talkBottom:before{
      content:" ";
      position:absolute;
      top:100%;
      left:50px;
      0;
      height:0;
      border-left:15px solid transparent;
      border-top:15px solid #808080;
      border-right:15px solid transparent;
    }
    #talkBottom:after{
      content:" ";
      position:absolute;
      top:100%;
      left:51px;
      0;
      height:0;
      border-left:14px solid transparent;
      border-top:14px solid #fff;
      border-right:14px solid transparent;
    }
    #talkBottom:hover{
      color:#fff;
      background-color:#ff0000;
    }
    #talkBottom:hover:after{
      0;
      height:0;
      border-left:14px solid transparent;
      border-top:14px solid #ff0000;
      border-right:14px solid transparent;
    }
    
    /*talkTop*/
    #talkTop:before{
      content:" ";
      position:absolute;
      top:-15px;
      left:50px;
      0;
      height:0;
      border-left:15px solid transparent;
      border-bottom:15px solid #808080;
      border-right:15px solid transparent;
    }
    #talkTop:after{
      content:" ";
      position:absolute;
      top:-14px;
      left:51px;
      0;
      height:0;
      border-left:14px solid transparent;
      border-bottom:14px solid #fff;
      border-right:14px solid transparent;
    }
    #talkTop:hover{
      color:#fff;
      background-color:#ff0000;
    }
    #talkTop:hover:after{
      0;
      height:0;
      border-left:14px solid transparent;
      border-bottom:14px solid #ff0000;
      border-right:14px solid transparent;
    }
    
    
    /*talkLeft*/
    #talkLeft:before{
      content:" ";
      position:absolute;
      top:15px;
      left:-7px;
      0;
      height:0;
      border-top:7px solid transparent;
      border-right:7px solid #808080;
      border-bottom:7px solid transparent;
    }
    #talkLeft:after{
      content:" ";
      position:absolute;
      top:16px;
      left:-6px;
      0;
      height:0;
      border-top:6px solid transparent;
      border-right:6px solid #fff;
      border-bottom:6px solid transparent;
    }
    #talkLeft:hover{
      color:#fff;
      background-color:#ff0000;
    }
    #talkLeft:hover:after{
      0;
      height:0;
      border-left:6px solid transparent;
      border-right:6px solid #ff0000;
      border-bottom:6px solid transparent;
    }
    
    
    /*talkRight*/
    #talkRight:before{
      content:" ";
      position:absolute;
      top:15px;
      right:-7px;
      0;
      height:0;
      border-top:7px solid transparent;
      border-left:7px solid #808080;
      border-bottom:7px solid transparent;
    }
    #talkRight:after{
      content:" ";
      position:absolute;
      top:16px;
      right:-6px;
      0;
      height:0;
      border-top:6px solid transparent;
      border-left:6px solid #fff;
      border-bottom:6px solid transparent;
    }
    #talkRight:hover{
      color:#fff;
      background-color:#ff0000;
    }
    #talkRight:hover:after{
      0;
      height:0;
      border-left:6px solid transparent;
      border-left:6px solid #ff0000;
      border-bottom:6px solid transparent;
    }
    

    css镂空三角形样式

  • 相关阅读:
    单表查询
    解读python中SocketServer源码
    C++实训(2.3)
    C++实训(2.2)
    C++实训(2.1)
    C++实训(1.3)
    C++实训(1.1)
    顺序表的实现,在vs2019上运行成功
    p243_5(3)
    自考新教材-p176_5(2)
  • 原文地址:https://www.cnblogs.com/yihan123/p/13687480.html
Copyright © 2020-2023  润新知