久久伦理影院I美女亚洲精品I手机色在线I免费韩国avI国产手机免费视频I久久99视频免费I懂色av懂色av粉嫩av分享吧I日本精品一区二区在线观看I开心综合网I国产一区在线观看免费I日韩欧美一区二区三区在线I一区av在线播放I精品综合久久久I日韩一区二区在线免费观看I国产99在线播放I色射色I国产精品一区二区在线免费观看

DIV+CSS實現左側帶三角形的提示框

2016/9/21 8:36:43 閱讀：2035 發布者：2035

實現效果

實現代碼

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="UTF-8"> 
    <link rel="shortcut icon" href="resources/img/logo-color.png" type="image/x-icon"> 
    <title>測試</title> 
    <style> 
    .out-div { 
        color: #FFFFFF; 
        font-size: 16px; 
        line-height: 40px; 
        display: inline-block; 
        height: 40px; 
        width: 200px; 
        text-align: center; 
        border-radius: 5px; 
        margin-left: 32px; 
        vertical-align: top; 
        background-color: maroon; 
    } 
     
    .arrow { 
        width: 0px; 
        height: 0px; 
        border-top: 10px solid transparent; 
        border-right: 10px solid; 
        border-bottom: 10px solid transparent; 
        position: absolute; 
        margin-left: -10px; 
        margin-top: 10px; 
        border-right-color: maroon; 
    } 
    </style> 
  </head> 
  <body> 
    <div class="out-div"> 
        <div class="arrow" ></div> 
        <span>這是一個提示框</span> 
    </div> 
  </body> 
</html>