[分享]css八分之一圆形按钮

CSS是前端开发中非常重要的一部分，对于一些简单的按钮效果，我们可以借助CSS实现，比如八分之一圆形按钮。

 .circle-btn {
        display: inline-block;
        width: 30px;
        height: 15px;
        background-color: #00bcd4;
        border-radius: 10px 10px 0 0;
        transform: rotate(-45deg);
        cursor: pointer;
    } 

首先我们需要一个具有背景颜色的正方形，设置宽高，然后使用border-radius属性设置四个角的圆角大小。

接下来是重点，我们使用transform: rotate(-45deg); 将正方形旋转45度，这时候它就变成了八分之一的圆形。

最后，我们设置cursor: pointer; 鼠标经过这个按钮时会变成手形鼠标，提高了用户交互体验。