css样式中三角形的应用
2016-07-25 本文已影响41人
eternalshallow
Paste_Image.png
代码如下：
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 150px auto 0;
text-align: center;
background: #6d6d6d;
}
h3{
margin-bottom: 50px;
}
.tooltip{
display: inline-block;margin: 0 10px;
padding: 10px;
background: #ccc;
border-radius: 10px;
border: 1px solid #1EC679;
position: relative;
}
.tooltip:before,.tooltip:after{
display: none;
position: absolute;
}
.tooltip:hover:before,.tooltip:hover:after{
display: block;
} /*定义矩形*/
.tooltip:before{
content: attr(alter);
width: 120px;
height: 30px;
border: 1px solid #1EC679;
text-align: center;
border-radius: 5px;
line-height: 30px;
color: #eeeeee;
background: #5db85d;
}
/*定义三角形*/
.tooltip:after{
width: 0;
height: 0;
content: '';
position: absolute;
border: solid transparent;
border-width: 8px;
}
/*左侧*/
.left:before{
left: -150px;
top: 50%;
margin-top: -15px;
}
.left:after{
border-left-color: #5db85d;
left: -30px;
top: 50%;
margin-top: -8px;
}
/*右侧*/
.right:before{
right: -150px;
top: 50%;
margin-top: -15px;
}
.right:after{
border-right-color: #5db85d;
right: -30px;
top: 50%;
margin-top: -8px;
}
/*上侧*/
.top:before{
left: 50%;
margin-left:-60px;
top: -51px;
}
.top:after{
border-top-color: #5db85d;
left:50%;
margin-left: -8px;
top: -20px;
}
/*下侧*/
.bottom:before{
left: 50%;
margin-left:-60px;
bottom: -51px;
}
.bottom:after{
border-bottom-color: #5db85d;
left:50%;
margin-left: -8px;
bottom: -20px;
}
</style>
</head>
<body>
<h3>使用position、before、after、border编写tooltip样式</h3>
<div class="tooltip left" alter="left">tooltip left</div>
<div class="tooltip top" alter="top">tooltip top</div>
<div class="tooltip bottom" alter="bottom">tooltip bottom</div>
<div class="tooltip right" alter="right">tooltip right</div>
</body>
</html>
