利用css制作提示框
2016-11-29 本文已影响0人
相思雨gg
首先说一下大概思路：
一个div给它宽高设为0，然后分别给四个边加上边框，边框的宽度根据你具体需要的提示框大小设置，把其中三个边框的颜色设置为透明（transparent）,那么剩下的那个边就成三角形了，听请来是不是有点迷糊，其实实现起来很简单，下面直接上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#bigbox{
width: 200px;
height: 200px;
background-color: #ccc;
position: relative;
margin-top: 50px;
}
#box{
width:0;
height:0;
border-top:50px solid transparent;
border-right:50px solid transparent;
border-bottom:50px solid #ccc;
border-left:50px solid transparent;
position: absolute;
left: 50px;
top:-100px;
}
</style>
</head>
<body>
<div id="bigbox">
<div id="box"></div>
</div>
</body>
</html>
实现的效果是这样的：
Paste_Image.png
