您的位置：首页 > Web前端 > CSS

css3三角形冒泡泡图形制作

2017-03-18 17:49 351 查看

图一：

图二：

<!DOCTYPE html>
<html>
<head>
<title>css 三角形</title>
<style type="text/css">
.test_triangle_border {
width: 200px;
margin: 0 auto 20px;
position: relative;
}
.test_triangle_border a {
colro: #333;
font-weight: bold;
tex-decoration: none;
}
.test_triangle_border .popup {
width: 100px;
background: #fc0;
padding: 10px 20px;
color: #333;
border-radius: 4px;
position: absolute;
top: 30px;
left: 30px;
border: 1px solid #333;
}
.test_triangle_border .popup span {
display: block;
width: 0;
height: 0;
border-width: 0px 10px 10px;
border-style: solid;
border-color: transparent transparent #333;
position: absolute;
top: -10px;
left: 50%;
margin-left: -10px;
}
.test_triangle_border .popup em {
display: block;
width: 0;
height: 0;
border-width: 0px 10px 10px;
border-style: solid;
border-color: transparent transparent #fc0;
position: absolute;
/* 注销之后，变成图二 */
top: 1px;
left: -10px;
/* 注销之后，变成图二 */
}
</style>
</head>
<body>
<div class="test_triangle_border">
<a href="#">三角形</a>
<div class="popup">
<span><em></em></span>纯CSS写带边框的三角形
</div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航