ps:本人初次研究,仅记录个人学习经验,如果错误还请多多指教!
最近才仔细研究对话框的小三角如何实现,先来了解一下相关的知识—border属性:
先看代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
width: 200px;
height: 200px;
border-top: 25px solid blue;
border-bottom: 25px solid red;
border-left: 25px solid yellow;
border-right: 25px solid skyblue;
background-color: gray;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果如图:
可以看出来,四边的border都是梯形(我以前一直以为是长方形o(╥﹏╥)o),所以这时候把div的width和height都设置为0,那么就可以得到四个三角形的border:
<style type="text/css">
div {
width: 0px;
height: 0px;
border-top: 25px solid blue;
border-bottom: 25px solid red;
border-left: 25px solid yellow;
border-right: 25px solid skyblue;
background-color: gray;
}
</style>
如果不设置其中一边的border的话,比如这样:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
width: 0px;
height: 0px;
border-top: 25px solid red;
border-bottom: 25px solid yellow;
border-right: 25px solid skyblue;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果图:
以此类推,还可以只设置两边的border,不够这两条边必须相邻,不然会显示不出来!
然后,可以根据需要,只设置你想要的那个三角形,其他的设置为透明的即可!
比如只要最右边的三角形:
<style type="text/css">
div {
width: 0px;
height: 0px;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid transparent;
border-right: 25px solid skyblue;
}
</style>
最后直接实现一个带有小三角的对话框:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
width: 200px;
height:100px;
border-radius: 5px;
background-color: #ccc;
position: relative;
margin: 0 auto;
}
div:before{
width: 0px;
height: 0px;
content: "";
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid #ccc;
position: absolute;
top: 40px;
left: -10px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
注意:以上代码千万不要忘记写【content:"";】,不然就显示不出来!
效果图:
还可以根据需要调节小三角的形状:
<style type="text/css">
div {
width: 200px;
height:100px;
border-radius: 5px;
background-color: #ccc;
position: relative;
margin: 0 auto;
}
div:before{
width: 0px;
height: 0px;
content: "";
border-top: 30px solid transparent;
border-bottom: 5px solid transparent;
border-right: 20px solid #ccc;
position: absolute;
top: 30px;
left: -10px;
}
</style>
效果图: