在CSS中,我們可以使用偽元素來實現右半圓的效果。以下是實現方式:
.round { position: relative; /*相對定位*/ width: 200px; height: 100px; background-color: #007bff; border-radius: 0 50px 50px 0; /*使用border-radius屬性*/ } .round::before { content: ""; /*必須有內容*/ position: absolute; /*絕對定位*/ top: 0; right: -50px; width: 0; height: 0; border-top: 50px solid transparent; /*設置上面的三角形*/ border-bottom: 50px solid transparent; /*設置下面的三角形*/ border-right: 50px solid #007bff; /*設置右側的半圓*/ }
通過使用偽元素::before,在右側添加一個半圓,其實是添加了一個等腰直角三角形和一個等腰的倒立三角形,并利用它們的邊緣相連形成的。通過使用border-radius屬性,將圓角取到了整個右下角。
上一篇mysql 游標主鍵
下一篇css填充值順序