Question

html 怎么完成三角形图片划分 并且鼠标放上去显示文字 谢谢

如上图.
html 怎么完成三角形图片区域划分 并且鼠标放上去显示文字 谢谢

Answer 1

文字用绝对定位就好，至于鼠标放上去的位置你可以使用html的map标签来实现这样的效果。

Answer 2

<style type="text/css">
#a1{
width: 0;
height: 0;
border-left: 500px solid transparent;
border-right: 500px solid transparent;
border-top: 500px solid rgba(0,0,0,0.6);
border-bottom: 500px solid rgba(0,0,0,0.6);
background:url("1.jpg")
/*上面的代码是做出4个三角形，左右2个三角形是透明的，上下2个三角形是黑色半透明的，加上一个背景图片*/
}

.a2{display:none;/*a2盒子是隐藏的*/}
 
#a1:hover .a2{display:block;/*鼠标经过a1盒子的时候，a2显示出来，就能看到文字了*/  width:300px;color:#fff;}
</style>

<div id="a1">
	<div class="a2">这里面是文字，去布局好，用position相对a1盒子定位，让a2里面的文字正好位于上下两个三角形里面就行</div> 
</div>

Answer 3

留个名，我也想知道怎么做