Question

我目前在我的显示器上有一个菱形图像。我正试图让文字显示出来，但是我把它放到了图像的底部。

有没有办法让我的html显示在菱形上/中？ `

    .rhomb {
         -webkit-box-sizing: content-box;
         -moz-box-sizing: content-box;
          box-sizing: content-box;
          width: 80px;
          height: 80px;
          margin: 250px 130px 0 450px;
          padding: 180px;
          border: none;
          font: normal 100%/normal Arial, Helvetica, sans-serif;
          color: yellow;
          -o-text-overflow: clip;
          text-overflow: clip;
          background: #1abc9c;
          -webkit-transform: rotateZ(-45deg)   ;
          transform: rotateZ(-45deg)   ;
          -webkit-transform-origin: 0 100% 0deg;
          transform-origin: 0 100% 0deg;
}

Answer 1

您的代码有效...只需将文本放在.rhomb div

中

.rhomb {
         -webkit-box-sizing: content-box;
         -moz-box-sizing: content-box;
          box-sizing: content-box;
          width: 80px;
          height: 80px;
          margin: 250px 130px 0 450px;
          padding: 180px;
          border: none;
          font: normal 100%/normal Arial, Helvetica, sans-serif;
          color: yellow;
          -o-text-overflow: clip;
          text-overflow: clip;
          background: lightgray;
          -webkit-transform: rotateZ(-45deg)   ;
          transform: rotateZ(-45deg)   ;
          -webkit-transform-origin: 0 100% 0deg;
          transform-origin: 0 100% 0deg;
}

<div class="rhomb">
    HEY IM SOME TEXT INSIDE THE RHOMBUS
</div>

如果你想让文字与屏幕对齐（不与菱形旋转对齐），请使用：

.rhomb {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    width: 80px;
    height: 80px;
    margin: 250px 130px 0 450px;
    padding: 180px;
    border: none;
    font: normal 100%/normal Arial, Helvetica, sans-serif;
    color: yellow;
    -o-text-overflow: clip;
    text-overflow: clip;
    background: lightgray;
    -webkit-transform: rotateZ(-45deg)   ;
    transform: rotateZ(-45deg)   ;
    -webkit-transform-origin: 0 100% 0deg;
    transform-origin: 0 100% 0deg;
}
.rhomb div{
    -webkit-transform: rotateZ(45deg)   ;
    transform: rotateZ(45deg)   ;
}

<div class="rhomb">
    <div>HEY IM SOME TEXT INSIDE THE RHOMBUS</div>
</div>

Answer 2

测试完代码后，只需将文本放在div中即可正常工作。

<div class="rhomb">
 Text
</div>

Html超过背景边距

2 个答案: