我需要创建一个在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
,但它没有成功。应该看起来像这样:
如果不可能,我想我将不得不使用图像。谢谢!
答案 0 :(得分:0)
我这里有一个样本。在这一个中,旋转文本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;
}
&#13;
<div class="holder">
<div class="rotated-text">
<p>Hello! <br> This text is rotated</p>
</div>
</div>
&#13;