Как нарисовать линию с полукругом посередине с помощью CSS?

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

<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 3

Demos:

1. Основные: http://jsfiddle.net/kDAAQ/2/
2. Uses clip для достижения более плавные линии: http://jsfiddle.net/kDAAQ/4/

Альтернативы

Однако, я бы для SVG, особенно если вы хотели что-то более сложное, чем это. Вы можете просто использовать изображение, или вы можете также style SVGs with CSS.

Почему SVG? Важно, чтобы вы не использовали формат растрового изображения (например, GIF, JPEG, PNG) из-за увеличения числа дисплеев с высокой плотностью.

Растровые изображения для точных объектов (например, линий, кругов и т. Д.) Выглядят плохими при масштабировании между физическими и логическими пикселями. Векторный формат (например, SVG) масштабируется чисто и отлично смотрится при любом разрешении/плотности.

Код для Demo # 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

CSS является неправильным инструментом для этой работы.

То, как я рекомендую делать такие вещи, было бы использовать border-image, с простым изображением SVG на границе.

Есть некоторые хорошие демоверсии силы этой техники здесь: http://www.sitepoint.com/css3-border-image/

с SVG изображения, вы можете нарисовать любую форму вы любите. Используя чистый CSS, вы в корне ограничены тем фактом, что CSS просто не предназначен для такого рода вещей. Да, это можно сделать в CSS, учитывая немного взлома с border-radius, но это будет некрасиво. SVG упростит работу.

Недостатком является то, что border-image и SVG не поддерживаются в старых версиях IE. Но опять же, равно border-radius и другие методы CSS, которые вам могут понадобиться для достижения этого в чистом CSS. Если вам нужна более старая поддержка браузера, вам понадобится простой рисунок старой школы.

Answer 5

Моя попытка: 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; 
} 

Answer 6

Просто для удовольствия, вот одна версия элемента с использованием фоновых градиентов: (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 - я просто подумал, что это забавное упражнение.