星空网 > 软件开发 > 网页设计

DIV+CSS实现左侧带三角形的提示框

实现效果

DIV+CSS实现左侧带三角形的提示框

实现代码

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

 




原标题:DIV+CSS实现左侧带三角形的提示框

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流