CSS:四种颜色的圆圈,只有一个div

前端之家收集整理的这篇文章主要介绍了CSS:四种颜色的圆圈,只有一个div前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
是否可以使用纯CSS创建一个具有四种不同颜色(每季度一个)的圆圈?
我想要像这四个圈子中的一个:

[不幸的是,我链接的图像不再存在了.请查看答案以了解我之后的影响]

我可以想象使用具有四个div和border-radius的解决方案,但是这可能只使用一个div和一些花哨的css3吗?

解决方法

由于您列出了CSS3,您可以使用边框和旋转变换来“修复”对齐:
  1. div {
  2. border-radius: 50px;
  3. border-style: solid;
  4. border-width: 50px;
  5. border-bottom-color: red;
  6. border-left-color: green;
  7. border-right-color: blue;
  8. border-top-color: yellow;
  9. height: 0px;
  10. width: 0px;
  11.  
  12. /* To ratate */
  13. -webkit-transform: rotate(45deg);
  14. -moz-transform: rotate(45deg);
  15. -ms-transform: rotate(45deg);
  16. -o-transform: rotate(45deg);
  17. transform: rotate(45deg);
  18. }

http://jsfiddle.net/k8Jj9/

猜你在找的CSS相关文章