尖角div
一、html程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
background-color: #8A2BE2;
}
div{
width: 100px;
height: 100px;
background-color: aqua;
position: relative;
word-break: break-all;
}
div:before{
content: " ";
position: absolute;
left:-20px;
width: 0px;
height: 0px;
border: 10px solid yellow;
border-top-color: transparent;
border-bottom-color:transparent ;
border-left-color: transparent;
border-right-color:yellow ;
}
div:after{
content: " ";
position: absolute;
right: -20px;
bottom: 0px;
width: 0px;
height: 0px;
border: 10px solid yellow;
border-top-color: transparent;
border-bottom-color:transparent ;
border-left-color: yellow;
border-right-color:transparent ;
}
header{
width: 100px;
height: 20px;
background-color: brown;
line-height: 20px;
text-align: center;
margin-top: 5px;
}
article{
width: 100px;
text-align: center;
border: 1px solid red;
display: none;
color:red;
}
.show{
display: block;
}
</style>
<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
<script type="text/javascript">
$(function(){
$("header").click(function(){
if($(this).next().hasClass("show")){
$(this).next().removeClass("show");
}
else{
$(this).siblings().removeClass("show");
// $(this).next().addClass("show");
$(this).next().slideToggle(1000);
}
});
});
</script>
</head>
<body>
<div>
225 好吧 把好吧吧䒔不安䒔希U幣 還defefrwfe
</div>
<header>1</header>
<article>
1.1<br />
1.2<br />
1.3<br />
</article>
<header>2</header>
<article>
2.1<br />
2.2<br />
3.3<br />
</article>
<header>3</header>
<article>
3.1<br />
3.2<br />
3.3<br />
</article>
<header>4</header>
<article>
4.1<br />
4.2<br />
4.3<br />
</article>
<input type="text" name="n1" value="2" hidden="hidden" />
</body>
</html>