Posted on | by liu
css代码验证，css 双 单样式，css元素填充剩余空间，css弹框登录页面，css 背景图片名，CSS状态栏重复浮现，css 细线
//HTML代码
<body><div class="circle-container"><div class="circle quarter">
<div class="circle quarter"> <div class="circle quarter">
<div class="circle quarter">
</div></body>//CSS代码
.circle-container {
width: 500px;
height: 500px;
position: relative;
}
.circle {
width: 0;
height: 0;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
}
.quarter {
border-bottom: 250px solid #f00;
border-right: 250px solid transparent;
transform: rotate(0deg);
}
.half {
border-bottom: 500px solid #fe0;
border-right: 500px solid transparent;
transform: rotate(90deg);
}
首先，大家需要创建一个圆形容器，使用CSS的border-radius属性设置容器的边框为50%即可。然后大家需要创建若干个用于显示分割的圆，这里以4等分为例。大家可以将容器分为四个区域，每个区域一个圆形，由于是四等分，每个圆形的边界是容器的正中心和相邻边界交点。分别设置每个圆形的边框和填充颜色，使用transform属性将其旋转90度展现在对应的位置，就可以实现将圆分为四等分的效果。