Question

我想用CSS绘制这样的东西：

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

Answer 1

您可以尝试使用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 Fiddle Demo

Answer 2

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

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

这里有一些很好的演示技术：http://www.sitepoint.com/css3-border-image/

使用SVG图像，您可以绘制任何您喜欢的形状。使用纯CSS，你基本上受限于CSS并不是为这类事物而设计的。是的，它可以在CSS中完成，因为对border-radius进行了一些黑客攻击，但它不会很漂亮。 SVG将变得简单。

当然，缺点是旧的IE版本不支持border-image和SVG。但是再一次，也不是border-radius和其他CSS技术，以便在纯CSS中实现这一点。如果您需要较旧的浏览器支持，则需要一个普通的旧式图形。

Answer 3

<强>演示：

基本：http://jsfiddle.net/kDAAQ/2/
使用clip来获得更平滑的线条：http://jsfiddle.net/kDAAQ/4/

<强>替代

但是，我会选择SVG，特别是如果你想要比这更复杂的东西。您可以简单地使用图片，也可以style SVGs with CSS。

为什么选择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;
}

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

6 个答案: