html - 如何在 div 顶部添加旋转的带下划线的消息

Question

我需要用 border-bottom 创建一个顶部有旋转消息的框，但是我不能让它响应。底线应始终从边界到边界。

.holder {
  width: 40%;
  background-color: yellow;
  height: 400px;
}
.rotated-text {
  float: right;
  text-align: center;
  width: 25%;
  border-bottom: 1px solid green;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);

}

<div class="holder">
  <div class="rotated-text">
    <p>Hello! <br> This text is rotated</p>
  </div>
</div>

我尝试使用 position: absolute 或一些 clip-path 但没有成功。应该看起来像这样:

如果不可能，我想我将不得不使用图像。谢谢!

Answer 1

我这里有一个样本。在这一个中，旋转文本 div 的宽度和高度是固定的。但它可以始终粘在容器的右上角。

.holder {
  width: 80%;
  background-color: yellow;
  height: 400px;
  position:relative
}
.rotated-text {
  position: absolute;
  text-align: center;
  width: 100px;
  height: 65px;
  border-bottom: 1px solid green;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  right:7px;
  top: 26px;
  background: red;
}
.rotated-text p{
  margin:0;
}
.rotated-text:after{
  content: "";
  position: absolute;
  left: -64px;
  right:-63px;
  bottom:0;
  height: 1px;
  background: green;
}

<div class="holder">
  <div class="rotated-text">
    <p>Hello! <br> This text is rotated</p>
  </div>
</div>