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

前端之家收集整理的这篇文章主要介绍了CSS:四种颜色的圆圈,只有一个div前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
是否可以使用纯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);
}

http://jsfiddle.net/k8Jj9/

原文链接:https://www.f2er.com/css/217848.html

猜你在找的CSS相关文章