Html 超过背景边距

Question

目前我的显示器上有一个菱形图像。我试图让文字显示在它上面，但是我输入的 amy html 转到了图像的底部。

有没有办法让我的 html 显示 on/in 菱形？ `

    .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 超过背景边距

Html over background margins

html

css

margins