答案 0 :(得分:3)
以其他方式转回内容。
* {
margin: 0;
padding: 0;
}
.diamond {
display: block;
height: 30px;
width: 30px;
background-color: white;
border: 2px solid #dcdcdc;
transform: rotate(45deg);
text-align: center;
line-height: 30px;
margin: 25px;
}
.diamond p {
transform: rotate(-45deg);
}

<div class="diamond">
<p>Hi</p>
</div>
&#13;
答案 1 :(得分:1)
我会使用伪元素。
然后我只需要进行一次旋转
该旋转仅适用于单个元素。
.mid-angle {
color: black;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
}
.mid-angle:before {
content: " ";
display: block;
position: absolute;
width: 50px;
height: 50px;
box-sizing: border-box;
border: 2px solid pink;
transform: rotate(45deg);
}
<div class="mid-angle">Hello</div>