如何在div

时间:2018-01-08 05:02:27

标签: html css

我需要创建一个在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,但它没有成功。应该看起来像这样:

enter image description here

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

1 个答案:

答案 0 :(得分:0)

我这里有一个样本。在这一个中,旋转文本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;