半方框内的文字

Question

我有一个css画一个半方框

.box-tri {
    width: 0;
    height: 0;
    border-right: 30px solid rgb(217, 224, 231);
    border-top: 30px solid transparent;
    border-left: 30px solid transparent;
    border-bottom: 30px solid rgb(217, 224, 231);
}

如果我想写一个与盒子对角线平行但在盒子内部的文字，我该怎么办。

Answer 1

我添加了一个子元素来包含文本并使用CSS transform旋转它：

<div class="box-tri">
    <span>Label</span>
</div>

.box-tri {
    width: 0;
    height: 0;
    border-right: 30px solid rgb(217, 224, 231);
    border-top: 30px solid transparent;
    border-left: 30px solid transparent;
    border-bottom: 30px solid rgb(217, 224, 231);
}
.box-tri span {
    position:relative;
    display:block;
    transform: rotate(-45deg) translate(-15px, -18px);
    -moz-transform: rotate(-45deg) translate(-15px, -18px);
    -webkit-transform: rotate(-45deg) translate(-15px, -18px);
    -webkit-backface-visibility: hidden;
    outline: 1px solid transparent;
    text-align:center;
    line-height:1em;
    width:60px;
    height:1em;
    overflow:hidden;
}

有一点需要注意的是，较长的文字效果不佳。我的版本会截断它。

WORKING EXAMPLE

---

为了回应你发现的另一个jsfiddle，我做了以下更改，使色带从右上角到右下角：

.ribbon-wrapper-green {
  ...
  top: -3px     // removed
  bottom: -3px; // added
}


.ribbon-green {
  ...
  -webkit-transform: rotate(45deg);   // removed
  -moz-transform:    rotate(45deg);   // removed
  -ms-transform:     rotate(45deg);   // removed
  -o-transform:      rotate(45deg);   // removed
  -webkit-transform: rotate(-45deg);  // added
  -moz-transform:    rotate(-45deg);  // added
  -ms-transform:     rotate(-45deg);  // added
  -o-transform:      rotate(-45deg);  // added
  ...
  top: 15px  // removed
  top: 45px; // added
}

这并不完美，但请尝试调整这些值以进行润色。

WORKING EXAMPLE