html-是否可以使用CSS创建此形状(将两个局部圆连接在一起)?
我正在尝试使用CSS完成两个div的边界:
我尝试仅使用<div class="left"></div>
<div class="right"></div>
,但两个局部圆圈没有被压在一起:[http://jsfiddle.net/uwz6L79w/]
<div class="left"></div>
<div class="right"></div>
<div class="left"></div>
<div class="right"></div>
我可以将它们进一步按在一起,但是我必须使一个div与另一个重叠,例如:[http://jsfiddle.net/uwz6L79w/1/。
<div class="left"></div>
<div class="right"></div>
<div class="left"></div>
<div class="right"></div>
有谁知道我如何在没有div重叠的情况下完成此任务?
SVG
使用SVG也可以做到这一点。
SVG版本非常短,因为它主要只需要一个Arc命令来控制其形状,大小和位置。
<svg width="50%" viewbox="0 0 100 50">
<path d="M50,35
a20,20 0 1,0 0,-20
a20,20 0 1,0 0,20z"
fill="white"
stroke="black">
</path>
</svg>
SVG代表可缩放矢量图形。 Web浏览器将其视为图像,但是您可以在SVG中添加文本和普通HTML元素。
所有浏览器都很好地支持它,可以在这里查看:CanIUse
- SVG | MDN
使用边框:推荐
您可以按照与第二个片段相同的方式进行操作,并使用下面的片段中的定位来避免两个3006565264071853030元素重叠。 在这里,圆是由伪元素产生的,重叠部分是使用其父对象上的3006565264071851853057切除的。
这里要注意的一件事是,任何悬停效果都应该添加到伪元素上,而不是父元素上。 这是因为如果将3006565264071851853056附加到父对象,则即使将鼠标悬停在圆圈外(因为父对象仍是正方形),也会触发它。
在此答案提供的所有三种解决方案中,这是具有最佳浏览器支持并且即使在IE8中也可以使用的解决方案。 因此,这是推荐的一种。
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<h3>CSS Clip Path</h3>
<div class='left css-clip'></div>
<div class='right css-clip'></div>
<h3>SVG Clip Path</h3>
<div class='left svg-clip'></div>
<div class='right svg-clip'></div>
<!-- Inline SVG for SVG Clip Path -->
<svg width='0' height='0'>
<defs>
<clipPath id='clipper-left' clipPathUnits='objectBoundingBox'>
<path d='M0,0 .8,0 .8,1 0,1z' />
</clipPath>
<clipPath id='clipper-right' clipPathUnits='objectBoundingBox'>
<path d='M.2,0 1,0 1,1 .2,1z' />
</clipPath>
</defs>
</svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<h3>CSS Clip Path</h3>
<div class='left css-clip'></div>
<div class='right css-clip'></div>
<h3>SVG Clip Path</h3>
<div class='left svg-clip'></div>
<div class='right svg-clip'></div>
<!-- Inline SVG for SVG Clip Path -->
<svg width='0' height='0'>
<defs>
<clipPath id='clipper-left' clipPathUnits='objectBoundingBox'>
<path d='M0,0 .8,0 .8,1 0,1z' />
</clipPath>
<clipPath id='clipper-right' clipPathUnits='objectBoundingBox'>
<path d='M.2,0 1,0 1,1 .2,1z' />
</clipPath>
</defs>
</svg>
使用径向渐变:
如果您不想在父级上使用伪元素和3006565264071851853056,则还可以使用hover
57背景图像生成圆并将其定位,从而最终产生所需的效果。 以下是此方法的样本片段。
这种方法的缺点是对3006565264071851853056的浏览器支持较低,在IE9及更低版本中不起作用。 另外,由径向渐变产生的圆通常呈锯齿状(粗糙边缘),当我们修改色标位置以使其更平滑时,其外观会稍微模糊。
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<h3>CSS Clip Path</h3>
<div class='left css-clip'></div>
<div class='right css-clip'></div>
<h3>SVG Clip Path</h3>
<div class='left svg-clip'></div>
<div class='right svg-clip'></div>
<!-- Inline SVG for SVG Clip Path -->
<svg width='0' height='0'>
<defs>
<clipPath id='clipper-left' clipPathUnits='objectBoundingBox'>
<path d='M0,0 .8,0 .8,1 0,1z' />
</clipPath>
<clipPath id='clipper-right' clipPathUnits='objectBoundingBox'>
<path d='M.2,0 1,0 1,1 .2,1z' />
</clipPath>
</defs>
</svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<h3>CSS Clip Path</h3>
<div class='left css-clip'></div>
<div class='right css-clip'></div>
<h3>SVG Clip Path</h3>
<div class='left svg-clip'></div>
<div class='right svg-clip'></div>
<!-- Inline SVG for SVG Clip Path -->
<svg width='0' height='0'>
<defs>
<clipPath id='clipper-left' clipPathUnits='objectBoundingBox'>
<path d='M0,0 .8,0 .8,1 0,1z' />
</clipPath>
<clipPath id='clipper-right' clipPathUnits='objectBoundingBox'>
<path d='M.2,0 1,0 1,1 .2,1z' />
</clipPath>
</defs>
</svg>
使用剪切路径(CSS / SVG):
可以使用的另一种方法是使用3006565264071853030。这种方法的优势在于,仅当光标在圆内时才能触发3006565264071851853057效果(如代码段所示)。 这是因为不必要的部分被修剪掉了。
缺点再次是浏览器支持差。 仅在Webkit中支持CSS版本<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<h3>CSS Clip Path</h3>
<div class='left css-clip'></div>
<div class='right css-clip'></div>
<h3>SVG Clip Path</h3>
<div class='left svg-clip'></div>
<div class='right svg-clip'></div>
<!-- Inline SVG for SVG Clip Path -->
<svg width='0' height='0'>
<defs>
<clipPath id='clipper-left' clipPathUnits='objectBoundingBox'>
<path d='M0,0 .8,0 .8,1 0,1z' />
</clipPath>
<clipPath id='clipper-right' clipPathUnits='objectBoundingBox'>
<path d='M.2,0 1,0 1,1 .2,1z' />
</clipPath>
</defs>
</svg>
,而在Firefox,IE中不支持CSS版本,而在Webkit,Firefox中却不支持SVG版本(使用嵌入式SVG)。
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<h3>CSS Clip Path</h3>
<div class='left css-clip'></div>
<div class='right css-clip'></div>
<h3>SVG Clip Path</h3>
<div class='left svg-clip'></div>
<div class='right svg-clip'></div>
<!-- Inline SVG for SVG Clip Path -->
<svg width='0' height='0'>
<defs>
<clipPath id='clipper-left' clipPathUnits='objectBoundingBox'>
<path d='M0,0 .8,0 .8,1 0,1z' />
</clipPath>
<clipPath id='clipper-right' clipPathUnits='objectBoundingBox'>
<path d='M.2,0 1,0 1,1 .2,1z' />
</clipPath>
</defs>
</svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<h3>CSS Clip Path</h3>
<div class='left css-clip'></div>
<div class='right css-clip'></div>
<h3>SVG Clip Path</h3>
<div class='left svg-clip'></div>
<div class='right svg-clip'></div>
<!-- Inline SVG for SVG Clip Path -->
<svg width='0' height='0'>
<defs>
<clipPath id='clipper-left' clipPathUnits='objectBoundingBox'>
<path d='M0,0 .8,0 .8,1 0,1z' />
</clipPath>
<clipPath id='clipper-right' clipPathUnits='objectBoundingBox'>
<path d='M.2,0 1,0 1,1 .2,1z' />
</clipPath>
</defs>
</svg>
这是仅使用一个<div class="shape">
</div>
的解决方案。
<div class="shape"> </div>
是带有10px
红色边框的透明圆圈。<div class="shape"> </div>
是带有10px
红色边框的不透明白色圆圈。<div class="shape"> </div>
是不透明的白色圆圈(无边框)。
<div class="shape">
</div>
<div class="shape">
</div>
这是我想出的一个简单例子。 我没有在不同的浏览器中对其进行过测试,但是它应该得到很好的支持。
HTML:
<div class="one"></div>
<div class="two"></div>
CSS:
div {
background: #fff;
border-radius: 50%;
float: left;
height: 100px;
position: relative;
width: 100px;
}
.one:after,
.two:after{
/* adjust this to set the border color */
background: #666;
border-radius: 50%;
content: "";
position: absolute;
z-index: -1;
/* adjust these to set the border width */
top: -5px;
right: -5px;
bottom: -5px;
left: -5px;
}
.two {
/* adjust this to set the overlap of the circles */
margin-left: -20px;
}
现场演示
我回到这个问题(六周后),纯粹是因为投票最多的答案激发了我的学术好奇心<svg viewbox="0 0 310 180">
<circle cx="90" cy="90" r="80" />
<circle cx="220" cy="90" r="80" />
<circle cx="90" cy="90" r="70" />
</svg>
,这是我很少遇到且从未花时间学习的东西。
由于我现在正在学习<svg viewbox="0 0 310 180">
<circle cx="90" cy="90" r="80" />
<circle cx="220" cy="90" r="80" />
<circle cx="90" cy="90" r="70" />
</svg>
,因此这个问题(使我开始寻求学习的问题)似乎是尝试一些新技能的理想挑战。
因此,这是一个替代的<svg viewbox="0 0 310 180">
<circle cx="90" cy="90" r="80" />
<circle cx="220" cy="90" r="80" />
<circle cx="90" cy="90" r="70" />
</svg>
解决方案,相当于我上面的单个<div>
CSS解决方案:
<svg viewbox="0 0 310 180">
<circle cx="90" cy="90" r="80" />
<circle cx="220" cy="90" r="80" />
<circle cx="90" cy="90" r="70" />
</svg>
<svg viewbox="0 0 310 180">
<circle cx="90" cy="90" r="80" />
<circle cx="220" cy="90" r="80" />
<circle cx="90" cy="90" r="70" />
</svg>