Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] creating half-ellipse div

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #196005
    bikejunkie
    Participant

    Hello;
    I wonder if you can advise on making a very elongated half-ellipse sitting on top of a thin line. I had it briefly working in codepen, but then it somehow broke. :-(
    http://codepen.io/anon/pen/gbvyLY

    Imagine taking this person’s code but with only the top half of the ellipse and a longer bottom line at the bottom.
    http://jsfiddle.net/QGtzW/4

    Thank you in advance

    #196009
    Paulie_D
    Member

    Don’t know how it was done before but here’s one way.

    Note, the border-width of the pseudo-element should not exceed the height of the line.

    http://codepen.io/Paulie-D/pen/ZYrZmo?editors=010

    #196012
    Paulie_D
    Member

    As an alternative…any size line and any size curve using an elliptical gradient

    http://codepen.io/Paulie-D/pen/GgQLBp?editors=010

    #196017
    bikejunkie
    Participant

    Thank you Paulie;
    That is pretty amazing looking. I think it’s hard to show what I’m attempting without an image. Here is a tinyURL
    http://tinypic.com/r/25iugdj/8
    I’m looking to create a top curved border that encloses text.
    Is this realistic? Or too much work to be practical.

    #196020
    Paulie_D
    Member

    Hmm.. I think it should be possible but I will have to look at it when I am not on a mobile device.

    #196021
    bikejunkie
    Participant

    Bearhead;
    That’s awesome. It will do the job nicely. Can you tell me which part of the code causes the fade out? I want to be able to adjust that.

    #196134
    bikejunkie
    Participant

    Thanks for that. I appreciate the info on the height relationship.
    If you look closely at either side where the ellipse approaches the black line, it gets gradually thinner but never actually touches the black line. I played with a few other settings including transparency on the ‘text’ div. There’s a site here – https://stackoverflow.com/questions/7565384/how-to-make-the-background-div-only-transparent-using-css#7565406
    which talks about transparency of child divs. It’s a little over my head, but didn’t seem to cause a change.
    No settings changes that I do cause the red ellipse to touch the black line. What it looks like is a white ‘halo’ around the line
    Here’s my fork, for what it’s worth
    http://codepen.io/anon/pen/OPvyBG

    ^@^

    #196191
    Paulie_D
    Member

    A ran this off this morning.

    http://codepen.io/Paulie-D/pen/emMdLM

    #196229
    bikejunkie
    Participant

    Paulie;
    That’s it!
    I was about to give up and do this as a .svg
    Thanks

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘CSS’ is closed to new topics and replies.