如何在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的宽度和高度是固定的。但它总能粘在容器的右上角。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;