1个回答
展开全部
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>
RunJS 演示代码
</title>
<style>
*{
margin:0;
}
.wrap{
margin:auto;
background-color:white;
width:300px;
height:300px;
cursor:pointer;
}
#triangle-up {
width: 0;
height: 0;
border-left: 150px solid transparent;
border-right: 150px solid transparent;
border-bottom: 150px solid black;
opacity:0.5;
}
#triangle-down {
width: 0;
height: 0;
border-left: 150px solid transparent;
border-right: 150px solid transparent;
border-top: 150px solid black;
opacity:0.5;
}
#triangle-down .one{
position: absolute;
margin: 57px 0px 0px -32px;
display:none;
}
#triangle-down:hover .one{
display:block;
}
#triangle-up .two{
position: absolute;
margin: -83px 0px 0px -32px;
display:none;
}
#triangle-up:hover .two{
display:block;
}
</style>
</head>
<body>
<div class="wrap">
<div id="triangle-down">
<div class="one">
一级标题
</div>
</div>
<div id="triangle-up">
<div class="two">
二级标题
</div>
</div>
</div>
</body>
</html>
追问
可不可以升级到三角区域响应呢
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
