如何使用纯CSS构造圆形、半圆和1/4圆

Pure CSS cirlce or quarters, 使用元素的4个边来实现圆形，通过控制4条边的颜色来实现不同的样式和形状。

css3, 教程

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 3582
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

@-webkit-keyframes rotate {
    0% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-trasform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-trasform: rotate(360deg);
    }
}
@keyframes rotate {
    0% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-trasform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-trasform: rotate(360deg);
    }
}
body {
    margin: 0;
    padding: 0 20px;
    font-family: 'helvetica', sans-serif;
    height: 100%;
    background-color: #eeeeee;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-trasform: translate3d(0, 0, 0);
}
.ex {
    width: 100%;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.ex pre {
    display: block;
    font-family: monospace;
    white-space: pre;
    padding: 15px 10px;
    background: #eeeeee;
    color: #555555;
    line-height: 100%;
    width: 60%;
}
.ex .ex-preview {
    width: 30%;
}
.container {
    width: 100%;
    max-width: 800px;
    background-color: #ffffff;
    position: relative;
    margin: 60px auto;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.25);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}
.container .top-browser {
    background-color: #dddddd;
    padding: 5px 10px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.container .top-browser .br-close {
    color: #c0392b;
    padding: 0 5px;
}
.container .top-browser .br-close:hover {
    color: #d65548;
}
.container .top-browser .br-minimize {
    color: #eb9950;
    padding: 0 5px;
}
.container .top-browser .br-minimize:hover {
    color: #eea667;
}
.container .top-browser .br-resize {
    color: #16a085;
    padding: 0 5px;
}
.container .top-browser .br-resize:hover {
    color: #1ccdaa;
}
.content {
    max-width: 700px;
    padding: 20px;
    margin: 0 auto;
    line-height: 150%;
}
.content strong {
    font-family: monospace;
    padding: 3px 5px;
    background: #eeeeee;
    color: #555555;
}
.content .circonf-ex-1 {
    margin: 0 auto;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-sizing: border-box;
    border: 10px solid #3498db;
    border-top-color: #8bc4ea;
    border-left-color: #5faee3;
    border-right-color: #b6daf2;
}
.circonf-wrapper {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
}
.circonf-wrapper .circonf {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 5px solid transparent;
    box-sizing: border-box;
    -webkit-animation: rotate 1s ease-in-out 0.5s infinite forwards;
    animation: rotate 1s ease-in-out 0.5s infinite forwards;
}
.circonf-wrapper .circonf.circonf-1 {
    border-top-color: #8bc4ea;
}
.circonf-wrapper .circonf.circonf-2 {
    border-top-color: #8bc4ea;
    border-right-color: #8bc4ea;
}
.circonf-wrapper .circonf.circonf-3 {
    border-top-color: #8bc4ea;
    border-right-color: #8bc4ea;
    border-bottom-color: #8bc4ea;
}
.circonf-wrapper .circonf.circonf-4 {
    border-color: #8bc4ea;
}

HTML

<div class="content">
        <h1>如何使用纯CSS构造圆形、半圆和1/4圆</h1>
    </div>

<div class="content">
        <p>Theres no secret when it comes to make a simple circumferences just using css, it's as simple as creating a circle with a <strong>border</strong>, although making <strong>quarters</strong>, halfs and three quarters circumferences is not much harder!</p>

<div class="ex">
            <pre>.circonf {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: 10px solid #3498db;
	box-sizing: border-box;
	border-top-color: lighten(#3498db, 20%);
	border-left-color: lighten(#3498db, 10%);
	border-right-color: lighten(#3498db, 30%);
}</pre>
            <div class="ex-preview">
                <div class="circonf-ex-1"></div>
            </div>
        </div>

<p>As you can see on the example above the code is not that complex, and you don't even need to use any <strong>pseudo-element</strong>, they key is setting the border as you normally do and give it a transparent color, or any other color really,
            and give diferent colors to the top, right, bottom & left.</p>

<p>Also as an extra tip you can set the border to grow inwards or outwards by setting the <strong>box-sizing</strong>.</p>

<p>Hope your learned something usefull, happy codding!</p>

</div>

Pure CSS cirlce or quarters, 使用元素的4个边来实现圆形，通过控制4条边的颜色来实现不同的样式和形状。

css3, 教程

编辑器支持Emmet

快捷键

Pure CSS cirlce or quarters, 使用元素的4个边来实现圆形，通过控制4条边的颜色来实现不同的样式和形状。

css3, 教程

使用CSS3变换、滤镜和背景图片构造的科幻虫洞

CSS3 适用于分享和社交的半圆形UI

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：