代码:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>076-086</title>
</head>
<body style="height: 5000px; background-color: yellow;">
<style>
.cs1{
width: 1000px;
height: 50px;
position: sticky;
top: 0px;
background-color: aqua;
margin: 0 auto;
text-align: right;
}
.cs2{
width: 1000px;
height: 500px;
position: fixed;
background-color: rgb(148, 70, 90);
z-index: 5;
}
.cs3{
width: 1000px;
height: 500px;
position: relative;
left: 100px;
background-color: rgb(58, 79, 171);
}
.cs4{
position:absolute;
width: 1000px;
height: 500px;
left: 100px;
background-color: rgb(58, 171, 115);
}
span{
width: 0;
height: 0;
border: 10px solid transparent;
border-top:10px solid red ;
display: inline-block;
position: relative;
top: 5px;
margin-top: 5px;
}
div:hover span{
border: 10px solid transparent;
border-bottom:10px solid red ;
position: relative;
top: -5px;
}
</style>
<div class="cs1"> 三角形实例
<span>
</span>
</div>
<div class="cs2"></div>
<div class="cs3"></div>
<div class="cs4"></div>
<div></div>
</body>
</html>