<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 500px;
margin: 50px auto;
}
.box div{
overflow: hidden;
width: 500px;
height: 40px;
transition: 0.5s;
/*border: 1px solid #000;*/
}
.box h3{
height: 40px;
background: #0cc;
border-radius: 5px;
position: relative;
}
.box a{
display: block;
line-height: 40px;
text-indent: 20px;
color: #fff;
}
.box h3 span{
display: block;
width: 0;
height: 0;
/*border-radius: 5px;*/
border: 5px solid #fff;
border-color: #fff transparent transparent transparent;
position: absolute;
top: 15px;
right: 20px;
}
.box p{
line-height: 20px;
font-size: 12px;
color: #333;
padding: 5px;
margin: 10px 0;
height: 90px;
overflow: auto;
}
.box div:target{
height: 150px;
}
</style>
</head>
<body>
<div class="box">
<div id="box1">
<h3><a href="#box1">标题一</a> <span></span></h3>
<p>
overflow height overflow height overflow heightoverflow height overflow height overflow height overflow height overflow height overflow height overflow height overflow height overflow height overflow height overflow heightoverflow height overflow height overflow height overflow height overflow height overflow height overflow height overflow height overflow height overflow height overflow heightoverflow height overflow height overflow height overflow height overflow height overflow height overflow height overflow height overflow height overflow height overflow heightoverflow height overflow height overflow height overflow height overflow height overflow height overflow height overflow height overflow height overflow height overflow heightoverflow height overflow height overflow height overflow height overflow height overflow height overflow height overflow height
</p>
</div>
<div id="box2">
<h3><a href="#box2">标题二</a> <span></span></h3>
<p>
overflow height overflow height overflow heightoverflow height overflow height overflow height overflow height overflow height overflow height overflow height overflow height overflow height overflow height overflow heightoverflow height overflow height overflow height overflow height overflow height overflow height overflow height overflow height overflow height overflow height overflow heightoverflow height overflow height overflow height overflow height overflow height overflow height overflow height overflow height overflow height overflow height overflow heightoverflow height overflow height overflow heightoverflow height overflow height overflow height
</p>
</div>
<div id="box3">
<h3><a href="#box3">标题三</a> <span></span></h3>
<p>
overflow height overflow height overflow heightoverflow height overflow height overflow height overflow height overflow height overflow height overflow height overflow height overflow height overflow height overflow heightoverflow height overflow height overflow height overflow height overflow height overflow height overflow height overflow height overflow height overflow height overflow heightoverflow height overflow height overflow height overflow height overflow height overflow height overflow height overflow height overflow height overflow height overflow heightoverflow height overflow height overflow height overflow height overflow height overflow height overflow height overflow height overflow height overflow height overflow heightoverflow height overflow height overflow heightoverflow height overflow height overflow heightoverflow height overflow height overflow heightoverflow height overflow height overflow height
</p>
</div>
</div>
</body>
</html>