带尖角的边框（方法二）
采用：before&：after实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>带尖角的边框</title>
<style>
#first {
position: relative;
width: 200px;
height: 100px;
border: 1px solid;
/* display: none;//不占用原来位置*/
visibility: hidden;
/* visibility: hidden占用原来位置*/
}
#first:before{
content: "";
position: absolute;
top: 100px;
left: 20px;
width: 0;
height: 0;
border: 10px solid transparent;
border-top-color: black;
}
#first:after {
content: "";
position: absolute;
top: 100px;
left: 21px;
width: 0;
height: 0;
border: 9px solid transparent;
border-top-color: white;
}
#test:hover #first{
/* display: block;*/
visibility: visible;
}
</style>
</head>
<body>
<div id="test">
<div id="first">
No matter how long the winter, spring is sure to follow.
</div>
<div id="second">more information</div>
</div>
</body>
</html>
