丁香花完整视频在线观看-午夜爽爽爽-亚洲777-女同一区二区-国产伊人网-国产乱码精品一品二品-天堂色av-伊人影院av-午夜中文字幕-久久精品片-男女视频在线观看免费-中文字幕久久网-欧美www视频-非洲黑妞xxxxhd精品-亚洲午夜精品在线-亚洲中午字幕-精品国产aⅴ-日本高清视频在线-成年人免费大片-亚洲精品视频在线免费

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

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

實現效果

實現代碼

<!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>