创建CSS半圆 [英] Create CSS Semi-Circles
本文介绍了创建CSS半圆的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个实心圆圈,其中包含这样的数字:
如何将其分成两个半圆,这样我可以在其中存储两个不同的数字,就像这样:
我的CSS如下:
.oval {
display:inline-block;
宽度:75像素;
高度:75像素;
边界半径:50%;
背景:#000000;
颜色:白色;
行高:75px;
font-size:中;
}
解决方案
您可以使用边界半径
.left-half,.right-half {float:left;宽度:40px;高度:80px;行高:80px;白颜色;文本对齐:居中;边距:0 1px;背景:黑色;}。left-half:nth-child(1){border-radius:80px 0 0 80px;}。right-half:nth-child(2){border-radius:0 80px 80px 0;}
< div class = circle> < div class = left-half> 21< / div> < div class = right-half> 12< / div>< / div>
或者您可以使用 SVG
.text { font-size:16px;填充:白色;}
< svg width = 105.5 px height = 97.874px viewBox = 0 0 105.5 97.874> < path d = M50.423,0.609v96.76c-26.72,0-48.38-21.66-48.38-48.38C2.043,22.269,23.703,0.609,50.423,0.609z /> < path d = M103.526,49.494c0,26.72-21.66,48.38-48.38,48.38V1.114C81.866,1.114,103.526,22.774,103.526,49.494z /> < text transform = matrix(1 0 0 1 20.0771 52.5107) class = text> 21< / text> < text transform = matrix(1 0 0 1 73.1807 53.0166) class = text> 12< / text>< / svg>
更新:您也可以只创建两个跨度的圆并在中间加上 pseudo-class
.circle {width:70px;高度:70px;背景:黑色;边界半径:50%;显示:flex; align-items:居中;白颜色;位置:相对;}跨度{flex:1; text-align:center;}。circle:before {content:;宽度:2px;位置:绝对;高度:100%;背景:白色;最高:0;左:50%;转换:translateX(-50%);}
< div class = circle> < span> 12< span> span> 24< / span>< / div>
I have a filled circle that contains a number like so:
How would I go about splitting this into two semi-circles, so that I can store two different numbers within it, like so:
My CSS is as follows:
.oval {
display: inline-block;
width: 75px;
height: 75px;
border-radius: 50%;
background: #000000;
color: white;
line-height: 75px;
font-size: medium;
}
解决方案
You can use border-radius
.left-half,
.right-half {
float: left;
width: 40px;
height: 80px;
line-height: 80px;
color: white;
text-align: center;
margin: 0 1px;
background: black;
}
.left-half:nth-child(1) {
border-radius: 80px 0 0 80px;
}
.right-half:nth-child(2) {
border-radius: 0 80px 80px 0;
}
<div class="circle">
<div class="left-half">21</div>
<div class="right-half">12</div>
</div>
Or you can use SVG
.text {
font-size: 16px;
fill: white;
}
<svg width="105.5px" height="97.874px" viewBox="0 0 105.5 97.874">
<path d="M50.423,0.609v96.76c-26.72,0-48.38-21.66-48.38-48.38C2.043,22.269,23.703,0.609,50.423,0.609z" />
<path d="M103.526,49.494c0,26.72-21.66,48.38-48.38,48.38V1.114C81.866,1.114,103.526,22.774,103.526,49.494z" />
<text transform="matrix(1 0 0 1 20.0771 52.5107)" class="text">21</text>
<text transform="matrix(1 0 0 1 73.1807 53.0166)" class="text">12</text>
</svg>
Update: You could also just create circle with two spans inside and add one line in middle with pseudo-class
.circle {
width: 70px;
height: 70px;
background: black;
border-radius: 50%;
display: flex;
align-items: center;
color: white;
position: relative;
}
span {
flex: 1;
text-align: center;
}
.circle:before {
content: "";
width: 2px;
position: absolute;
height: 100%;
background: white;
top: 0;
left: 50%;
transform: translateX(-50%);
}
<div class="circle">
<span>12</span><span>24</span>
</div>
这篇关于创建CSS半圆的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文