如何在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>