CODEWITHSUNDEEP
css
codenamepenryn
codenamepenryn

Reputation: 461

How do I draw a line with a semicircle in the middle with CSS?

I would like to draw something like this with CSS:

https://i.sstatic.net/EnTHp.jpg

Upvotes: 0

Views: 2336

Answers (6)

James Holderness
James Holderness

Reputation: 23001

Just for fun, here's a single element version using background gradients: (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;
}

On some webkit browsers you'll need to include webkit prefixes to get this to work, and the gradient syntax might even be different on older browsers. But as others have said, this is not really a good use for CSS anyway - I just thought it was a fun exercise.

Upvotes: 1

Sachin
Sachin

Reputation: 40970

You can try this with 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

Upvotes: 2

Tim M.
Tim M.

Reputation: 54377

Demos:

  1. Basic: http://jsfiddle.net/kDAAQ/2/
  2. Uses clip to achieve smoother lines: http://jsfiddle.net/kDAAQ/4/

Alternatives

However, I'd go for an SVG, especially if you wanted something any more complex than this. You could simply use an image, or you can also style SVGs with CSS.

Why an SVG? It's important that you don't use a raster image format (like GIF, JPEG, PNG) due to the increasing number of high-density displays.

Raster images for precise objects (like lines, circles, etc.) look poor when scaling between physical and logical pixels. A vector format (such as SVG) scales cleanly and will look great at any resolution/density.

Code for 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;
}

Upvotes: 1

Gareth Cornish
Gareth Cornish

Reputation: 4356

My attempt: 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;
}

Upvotes: 0

Spudley
Spudley

Reputation: 168685

CSS is the wrong tool for this job.

The way I'd recommend doing this sort of thing would be to use border-image, with a simple SVG image in the border.

There are some good demos of the power of this technique here: http://www.sitepoint.com/css3-border-image/

With an SVG image, you can draw any shape you like. Using pure CSS, you're fundamentally limited by the fact that CSS just isn't designed for this sort of thing. Yes, it can be done in CSS, given a bit of hacking with border-radius, but it won't be pretty. SVG will make it easy.

The down-side, of course, is that border-image and SVG aren't supported in older IE versions. But then again, nor is border-radius, and other CSS techniques you may need in order to achieve this in pure CSS. If you need older browser support, an plain old-school graphic will be necessary.

Upvotes: 2

Jean-Bernard Pellerin
Jean-Bernard Pellerin

Reputation: 12670

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

Upvotes: 0

Related Questions