我试图让这些 div 重叠并让文本位于三 Angular 形内,但文本只能在三 Angular 形外移动。
这是 HTML+CSS:
<div class="tri">
<div class="test">
This is test
</div>
.tri {
width: 0;
height: 0;
border-top: 100px solid black;
border-left: 100px solid transparent;
position:relative;
}
.test {
display:inline-block;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
zoom:1;
margin-top:-80px;
margin-left:-80px;
color:red;
}
最佳答案
您可以简单地使用 position: relative;
作为容器元素,而不是使用 position: absolute;
作为子元素,这样,您的绝对定位元素就不会t在野外流出,会相对于父元素,也会这样重叠
它也是一个带边框的 CSS 三 Angular 形,height
和 width
分别设置为 0
,因此您不能期望子元素重叠三 Angular 形
关于css - 为什么我的 div 不重叠?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18487821/