Question

我试图让这些div重叠并让文本在三角形内，但文本只能在三角形外移动。

这是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;
}

Answer 1

您可以简单地使用position: relative;作为容器元素，而不是使用position: absolute;作为子元素，这样，您的绝对定位元素将不会在野外流出，并且相对于父元素，它也会以这种方式重叠

Demo

此外，它是一个带有边框且height和width分别设置为0的CSS三角形，因此您不能指望子元素与三角形重叠

Answer 2

我不完全确定你要在这里做什么。如果您希望文本位于黑色三角形内，则可以编辑

display:inline-block;

在JSFiddle工作，但仅在FireFox和Chrome中测试过，可能想要查看更多浏览器。

为什么我的div不会重叠？

2 个答案: