首页 > 蚂蚁部落 > 正文

CSS带有箭头的对话框效果
2017-08-29 10:17:39   来源:   评论:0 点击:

分享一段代码实例,它实现了带有箭头的矩形对话框效果。代码实例如下:[HTML] 纯文本查看 复制代码& 36816;& 34892;& 20195;& 30721;<!DOC

分享一段代码实例,它实现了带有箭头的矩形对话框效果。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><style>.commonProblem-title {  color: #32c5d2;  font-size: 19px;  margin: 10px 20px;}.commonProblem-list {  color: #737373;}.commonProblem-close {  margin: 5px;}.commonProblem-dialog {  position: relative;  width: 200px;  border: 1px solid #a9a9a9;  margin-left: 45px;  background-color: #fff;}.commonProblem-dialog:before {  position: absolute;  content: "";  width: 0;  height: 0;  left: -59px;  top: 28px;  border-top: 20px solid transparent;  border-right: 59px solid #a9a9a9;}.commonProblem-dialog:after {  position: absolute;  content: "";  width: 0;  height: 0;  left: -51px;  top: 29px;  border-top: 18px solid transparent;  border-right: 51px solid #fff;}</style></head><body>  <div class="commonProblem-dialog">    <div class="pull-left">      <p class="commonProblem-title">蚂蚁部落</p>      <ul class="commonProblem-list">        <li>蚂蚁部落一</li>        <li>蚂蚁部落二</li>      </ul>    </div>    <div class="pull-right">    </div>    <div style="clear: both"></div>  </div></body></html>

相关热词搜索:

上一篇:Nodejs获取url路径中的各个参数
下一篇:十六进制颜色转换为RGB代码实例

分享到: 收藏
评论排行