<!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占用原來位置*/
}
#one {
position: absolute;
top: 100px;
left: 20px;
width: 0;
height: 0;
border: 10px solid transparent;
border-top-color: black;
}//黑色的小尖角
#two {
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 id="one"></div>
<div id="two"></div>
</div>
<div id="second">more information</div>
</div>
</body>
</html>
文章列表
