0

これらの div をオーバーラップさせ、テキストを三角形の内側に配置しようとしていますが、テキストは三角形の外側にしか移動できません。

JSFiddle

これは 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;
}
4

2 に答える 2

3

position: relative;コンテナ要素に使用するだけでなくposition: absolute;、子要素に使用することもできます。この方法では、絶対配置された要素が自然に流出することはなく、親要素に対して相対的になり、このようにオーバーラップされます。

デモ

heightまた、それぞれに境界線と がwidth設定された CSS 三角形で0あるため、子要素が三角形に重なることは期待できません。

于 2013-08-28T12:27:37.480 に答える