css 画正圆 胶囊按钮 三角形

1.正圆
-盒子必须是正方形
-设置边框圆角为盒子宽高的一半- border-radius: 50%

2.胶囊按钮
- 盒子要求是长方形
- border-radius: 盒子高度的一半 (50%)

3.三角形

div {
            width: 0;
            height: 0;
            border: 80px solid transparent;
            border-left: 80px solid red;
        }

效果图：
或者:
- 设置一个盒子
- 设置四周不同颜色的边框
- 将盒子宽高设置为0，仅保留边框
- 得到四个不同颜色的三角形
- 选择其中一个后，其他三角形（边框）设置颜色为透明

如果不把其他三条边框设为透明那就是四个三角形