扇形的形狀獨特,可以通過CSS實現在扇形區域寫字。
.letter{ width:200px; height:200px; background-color: coral; border-radius: 100% 0 0 0; position:relative; } .letter:after{ content: "A"; color: white; font-size: 80px; position: absolute; right: -90px; bottom: -45px; transform-origin: bottom left; transform: rotate(-45deg); }
上述代碼使用了偽元素:after,在扇形中心位置絕對定位,旋轉一定角度,同時設置旋轉中心在底部左側,實現在扇形中心寫字的效果。
調整字體大小和位置,可以在不同大小、顏色和位置的扇形中實現不同的效果。
.letter{ width:300px; height:300px; background-color: black; border-radius: 100% 0 0 0; position:relative; } .letter:after{ content: "LOVE"; color: red; font-size: 60px; position: absolute; right: -110px; bottom: -15px; transform-origin: bottom left; transform: rotate(-35deg); }
上述代碼實現了在一個更大的扇形區域內寫出“LOVE”的效果。
通過CSS實現在扇形內寫字,可以達到獨特的視覺效果,可以用于設計中的logo或者其他視覺元素的制作。