[英]Incomplete circle using CSS with divider in middle with text
I am trying to make a circle being divided by the center with some text. 我试图通过一些文本将圆圈划分为中心。 But can not find any solution using css. 但是使用css找不到任何解决方案。
My HTML: 我的HTML:
<div class="wrap">
<div class="left">
</div>
<div class="right">
</div>
</div>
My CSS: 我的CSS:
.right, .left {
height: 200px;
width: 200px;
border: 1px solid #9F9F9F;
float: left;
margin: 2px;
}
.wrap {
margin: auto;
width: 420px;
position: relative;
}
.left:after {
content: "";
display: inline-block;
height: 60px;
width: 6px;
position: absolute;
left: 203px;
top: 65px;
z-index: 99;
background-color: #fff;
}
.right:before {
content: "OR";
border: 1px solid #9F9F9F;
width: 50px;
display: inline-block;
border-radius: 50%;
position: absolute;
left: 175px;
top: 65px;
text-align: center;
padding: 20px 5px;
}
Fiddle: https://jsfiddle.net/2re8d0cv/ 小提琴: https : //jsfiddle.net/2re8d0cv/
My desired output is: 我想要的输出是:
After looking into my code and desired output you will understand. 在查看我的代码和所需的输出后,您将理解。 I don't want to use image there. 我不想在那里使用图像。 as it will resolve problem I can not use image. 因为它将解决问题我不能使用图像。 I want to make it with full CSS only, but I also don't know if it is possible or not. 我想用完整的CSS制作它,但我也不知道它是否可能。
You can accomplish this by adding another pseudo element so that the word "or" is not overlapped by other elements. 您可以通过添加另一个伪元素来实现此目的,以便单词“或”不与其他元素重叠。
In the example below I've added a new .right:after
almost identical to .right:before
, except this element will be the one to display the text at a higher z-index. 在下面的例子中,我添加了一个新的.right:after
几乎与.right:before
相同,除了这个元素将是一个以更高的z-index显示文本的元素。
See this updated version of your fiddle . 看到这个小提琴的更新版本 。
.right:before {
content:"";
border: 1px solid #9F9F9F;
width: 50px;
height: 18px;
display: inline-block;
border-radius: 50%;
position: absolute;
left: 175px;
top: 65px;
text-align: center;
padding: 20px 5px;
}
.right:after {
content: "OR";
width: 50px;
display: inline-block;
border-radius: 50%;
position: absolute;
left: 175px;
top: 65px;
text-align: center;
padding: 20px 5px;
z-index: 101
}
Edit: however, as you pointed out, this creates a 1 pixel gap near the border of the circle 编辑:但是,正如您所指出的,这会在圆的边界附近创建一个1像素的间隙
We have to add a 4th and final pseudo element to cover up the borders from other elements that we don't want to see. 我们必须添加第4个和最后一个伪元素来掩盖我们不想看到的其他元素的边界。
In other words, our previous pseudo element .right:after
covers up the unwanted x-axis lines and the new .left:before
covers up the y-axis lines. 换句话说,我们之前的伪元素.right:after
覆盖不需要的x轴线和新的.left:before
覆盖y轴线.left:before
。
.left:before {
content: "";
display: inline-block;
height: 58px;
width: 6px;
position: absolute;
left: 203px;
top: 66px;
z-index: 99;
background-color: #FFF;
}
Updated fiddle here . 这里更新了小提琴 。
Here is a solution using <SVG> 这是使用<SVG>的解决方案
Here is how it looks: 以下是它的外观:
.wrapper { height: 400px; } .right { float: right; display: inline-block; width: 45%; height: 100%; } .circlebetween { position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; width: 20%; height: 100%; fill: white; stroke: #999; stroke-width: 0.7; } .left { float: left; display: inline-block; width: 45%; height: 100%; }
<div class="wrapper"> <div class="right">RIGHT</div> <svg class="circlebetween" viewBox="0 0 20 100" perserveAspectRatio="none"> <path d="M 7,0 7,35 A 15.1 15.1 0 0 0 7 65 V100" /> <path d="M13,0 13,35 A 15.1 15.1 0 0 1 13 65 V 100" /> <text x="50%" y="50%" dy=".3em" font-familiy="serif" stroke="none" fill="black" text-anchor="middle" transform="">OR</text> </svg> <div class="left">LEFT</div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.