How to pinch the middle of a line in css

Question

I am trying to make a line that almost looks like serifs at the ends. Essentially, I want to make it wider at the very ends and thinly in the middle, just using css. It really turned out to be quite a challenge.

Any help would be appreciated.

So far, I could get the bottom to see how I want to use the :after pseudo-selector, but not luck with a vertex, and I can only seem concave rather than convex.

Here is the code of what I have done so far

  .line { background:none; height: 8px; position:relative; overflow:hidden; z-index:1; top: 50px; left: 50px; width: 140px; box-shadow: 11px 12px 16px -3px rgba(0,0,0,0.6); -webkit-transform: rotate(38deg); transform: rotate(38deg); } .line:after { content: ''; position: absolute; left: 0%; width: 100%; padding-bottom: 10%; top: 50%; border-radius: 35%; box-shadow: 0px 0px 0px 150px rgba(0,0,0,0.6); z-index: -1; } .line:before { content: ''; position: absolute; left: 0%; width: 100%; padding-bottom: 8%; top: -30%; border-radius: 35%; box-shadow: 0px 0px 0px 150px rgba(255,255,255, 1); z-index: 24 !important; } 

and HTML

 <section class="stage"> <figure class="line"></figure> </section> 

Here is the scenario of what I have so far (also, I will need to rotate it for certain areas)

http://jsfiddle.net/speo9bfv/1/

Thanks for the help!

Answer 1

If you have a simple background color, you can do this using pseudo-elements:

Demo

HTML:

 <section class="stage"> <figure class="line"></figure> </section> 

CSS:

 .line { height: 8px; position:relative; overflow:hidden; z-index:1; top: 50px; left: 50px; width: 140px; -webkit-transform: rotate(38deg); transform: rotate(38deg); background:rgba(0,0,0,0.6); } .line:after, .line:before { content:''; position: absolute; left:0; width:100%; height:100%; border-radius: 35%; background:#fff; } .line:after{ top:5px; } .line:before{ bottom:5px; } 

Answer 2

I would try using gradients to create the illusion of a clamped line.

 black -> white -> black black line black -> white -> black 

I wanted this to be just a comment, but I could not create new lines as I wanted.

Here is the fiddle for you: http://jsfiddle.net/qaqafc6f/

It’s better here with a turn. http://jsfiddle.net/qaqafc6f/2/

Note that this does not use :before or :after and is probably more compatible with multiple browsers (if you add provider prefixes).

Answer 3

If you need transparency around this shape, you can use two pseudo-elements with a curved border radius and several boxed shadows for the color in the space between them:

 .line { height: 8px; position:relative; overflow:hidden; z-index:1; top: 50px; left: 50px; width: 140px; -webkit-transform: rotate(38deg); transform: rotate(38deg); } .line:after, .line:before { content:''; position: absolute; left:-10px; right:-10px; height:100%; border-radius: 50%; background:transparent; box-shadow: 0 0 1px 1px rgba(0, 0, 0, .5), 5px 0 0px 2px rgba(0, 0, 0, .5), -5px 0 0px 2px rgba(0, 0, 0, .5), 10px 0 0px 2px rgba(0, 0, 0, .5), -10px 0 0px 2px rgba(0, 0, 0, .5), 15px 0 0px 2px rgba(0, 0, 0, .5), -15px 0 1px 2px rgba(0, 0, 0, .5), 20px 0 0px 2px rgba(0, 0, 0, .5), -20px 0 0px 2px rgba(0, 0, 0, .5), 25px 0 0px 2px rgba(0, 0, 0, .5), -25px 0 0px 2px rgba(0, 0, 0, .5), 30px 0 1px 1px rgba(0, 0, 0, .5), -30px 0 1px 1px rgba(0, 0, 0, .5); } 

Or - if the built-in svg datauri is acceptable - you can do something like:

 .svg-stick { margin-top:200px; display:block; width:140px; height:8px; background: transparent url(data:image/svg+xml; base64, PD94bWwgdmVyc2lvbj0iM...etc...) center center no-repeat; background-size:100% 100%; -webkit-transform: rotate(38deg); transform: rotate(38deg); } 

Both demos are here: http://jsfiddle.net/eqaL4g5q/