css - 如何用CSS在中间画一条带半圆的线？

Question

我想用 CSS 画出这样的东西：

http://i.imgur.com/Fjn8uK4.jpg

Answer 1

CSS 是这项工作的错误工具。

我建议做这种事情的方法是使用border-image，在边框中使用一个简单的 SVG 图像。

这里有一些关于这种技术强大功能的很好的演示：http ://www.sitepoint.com/css3-border-image/

使用 SVG 图像，您可以绘制任何您喜欢的形状。使用纯 CSS，您从根本上受限于 CSS 并非专为此类事情而设计的事实。是的，它可以在 CSS 中完成，给一点 hacking border-radius，但它不会很漂亮。SVG 将使它变得容易。

当然，不利的一面是border-image旧 IE 版本不支持 SVG。但话又说回来，nor isborder-radius和您可能需要的其他 CSS 技术才能在纯 CSS 中实现这一点。如果您需要较旧的浏览器支持，则需要一个普通的老式图形。

Answer 2

你可以用css试试这个

.semi{
 height:25px;
 width:40px;
 border-radius: 0 0 40px 40px;
 margin:0px auto;
 border:1px solid #CCC;
 border-top:none;
 position:relative;
 background:white;
 top:-2px;
}
.parent
{
  width:500px;
  text-align:center;
  border-top:1px solid #CCC;
}

JS 小提琴演示

Answer 3

演示：

1. 基本：http: //jsfiddle.net/kDAAQ/2/
2. 用于clip实现更平滑的线条：http: //jsfiddle.net/kDAAQ/4/

备择方案

但是，我会选择 SVG，特别是如果您想要比这更复杂的东西。您可以简单地使用图像，也可以使用 CSS 设置 SVG 样式。

为什么是 SVG？由于高密度显示器的数量不断增加，请不要使用光栅图像格式（如 GIF、JPEG、PNG），这一点很重要。

在物理像素和逻辑像素之间缩放时，精确对象（如线、圆等）的光栅图像看起来很差。矢量格式（例如 SVG）可以清晰地缩放，并且在任何分辨率/密度下看起来都很棒。

演示代码 #1

<div id="line"></div>

#line{
    border-radius: 16px;
    height: 32px;
    width: 32px;
    border-bottom: 2px solid blue;
    position: relative;
    left: 200px;

}

#line:before{
    width: 200px;
    content: "";
    border-bottom: 1px solid blue;
    position: absolute;
    left: -200px;
    top: 18px;
}

#line:after{
    top: 18px;
    width: 200px;
    content: "";
    border-bottom: 1px solid blue;
    position: absolute;
    left: 32px;
}

Answer 4

只是为了好玩，这是一个使用背景渐变的单元素版本：（JSFiddle）

.semi-circle {
  width:150px;
  height:18px;
  background-color:white;
  background:
    linear-gradient(white,white 4px,silver 4px,white 5px,white),
    linear-gradient(white,white 4px,silver 4px,white 5px,white),
    radial-gradient(circle 40px at 50% -19px, white, white 30px, silver 31px, white 31px);
  background-size:50% 40px,50% 40px,100% 40px;
  background-position:-20px 0,95px 0,0 0;
  background-repeat:no-repeat;
}

在某些 webkit 浏览器上，您需要包含webkit前缀才能使其正常工作，并且渐变语法甚至可能在旧浏览器上有所不同。但正如其他人所说，这对 CSS 来说并不是一个很好的用途——我只是认为这是一个有趣的练习。

Answer 5

<div class='line'></div>
<div class='halfCircle'></div>
<div class='line'></div>

div {
     float:left;   
}

.line{
     height:45px;
     width:90px;
     border-top: 1px solid green;
}

.halfCircle{
     height:45px;
     width:90px;
     border-radius: 0 0 90px 90px;
     -moz-border-radius: 0 0 90px 90px;
     -webkit-border-radius: 0 0 90px 90px;
     border-left: 1px solid green;
     border-bottom: 1px solid green;
     border-right: 1px solid green;
}

http://jsfiddle.net/wGzMd/

Answer 6

我的尝试：http: //jsfiddle.net/Wtv9z/

div{
    width: 100px;
    height: 100px;
    border-radius: 50px;
    border-bottom: solid 1px #ccc;
    margin: 0px 100px;
    position: relative;
}
div:before{
    content:'';
    position: absolute;
    top: 75px;
    left: -92px;
    width: 100px;
    height: 1px;
    border-bottom: solid 1px #ccc;
}
div:after{
    content:'';
    position: absolute;
    top: 75px;
    right: -92px;
    width: 100px;
    height: 1px;
    border-bottom: solid 1px #ccc;
}