是否可以使用纯CSS创建一个具有四种不同颜色(每季度一个)的圆圈?
我想要像这四个圈子中的一个:
我想要像这四个圈子中的一个:
[不幸的是,我链接的图像不再存在了.请查看答案以了解我之后的影响]
我可以想象使用具有四个div和border-radius的解决方案,但是这可能只使用一个div和一些花哨的css3吗?
解决方法
由于您列出了CSS3,您可以使用边框和旋转变换来“修复”对齐:
- div {
- border-radius: 50px;
- border-style: solid;
- border-width: 50px;
- border-bottom-color: red;
- border-left-color: green;
- border-right-color: blue;
- border-top-color: yellow;
- height: 0px;
- width: 0px;
- /* To ratate */
- -webkit-transform: rotate(45deg);
- -moz-transform: rotate(45deg);
- -ms-transform: rotate(45deg);
- -o-transform: rotate(45deg);
- transform: rotate(45deg);
- }