如何將文本位置的旋轉格箱

Question

裏面象這樣

應該過於集中。

.diamond { 
    display: block; 
    height: 30px; 
    width: 30px; 
    background-color: white; 
    border: 2px solid #dcdcdc; 
    transform: rotate(45deg);} 

Answer 1

以其他方式旋轉內容。

* { 
 
    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>

Answer 2

我會用一個僞元素這一點。
然後我只需要應用一個旋轉。
該旋轉僅在單個元素上。

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