Css 半方形框内包含的文本

我有一个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);
}

---

现在，如果我想写一个与方框对角线平行但在方框内的文本，我应该怎么做。

我添加了一个子元素来包含文本，并使用CSS

transform

将其旋转：

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

一个警告是，较长的文本不太好用。我的版本将其截断

---

为了响应您找到的另一个JSFIDLE，我做了以下更改，以使功能区从右上角转到右下角：

.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
}

它并不完美，但请尝试调整这些值以使其更加完美

---

如果您的意思是“倾斜”，则可以使用旋转变换：

变换：旋转（30度）

在CSW中，当我使用transform时，它正在旋转半方形框。我还发现了一个可能有用的。谢谢…我在搜索时发现。。。我能做些什么改变使它显示在右下角而不是右上角我试了一下，上图。

.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
}