CODEWITHSUNDEEP
css
l a a b i
l a a b i

Reputation: 23

Css border-radius not sharp

I'm trying to create a button similar to this:

so far after many attempts all i get at best is a really curvy button like this :

using :

.btn
{
    box-shadow: inset 0px 1px 1px rgba(255, 255, 255, 0.7);
    border: 1px solid white;
    border-radius: 100% 100% 0px 0px;
}

what i don't understand is why the bottom isn't displaying and what technique they used or i can use to get the curvy display.

EDIT

here is a larger image of what i'am trying to accomplish :

what would be the alternative to pure css?

Upvotes: 0

Views: 2772

Answers (3)

MintWelsh
MintWelsh

Reputation: 1259

http://jsfiddle.net/Les1zwsr/

<div class="btn">
  <div class="btnright">
      </div>
    <div class="btnleft">
  </div>
</div>

.btn
{
    position:relative;
    top:0;
    left:0;
    height:50px;
    width:80px;
    //width and height can be changed but will affect the (btnleft,btnright :after)s
    background-color:red;
    left:100px;
}

.btnright,.btnleft
{
    position:absolute;
    height:100%;
    width:50px;
    background-color:red;
}

.btnright:after,.btnleft:after
{
    content:"";
    position:absolute;
    bottom:-50%;
    width:50px;
    height:100%;
    background : red;
}

.btnright:after
{
    right:-18px;
    //this 18px will need to be changed if you are changing the width/height of the .btn
    background:
        linear-gradient(135deg, transparent 10px, red 0) top left,
        linear-gradient(225deg, transparent 10px, red 0) top right,
        linear-gradient(315deg, transparent 10px, red 0) bottom right,
        linear-gradient(45deg,  transparent 10px, red 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;

    background-image:
        radial-gradient(circle at 0 0, rgba(204,0,0,0) 14px, transparent 15px),
        radial-gradient(circle at 100% 0, rgba(204,0,0,0) 23px, red 23px),
        //the above line is the top right corner, if changing '23px' you can affect the slope, but apply changes to both
        radial-gradient(circle at 100% 100%, rgba(204,0,0,0) 14px, transparent 15px),
        radial-gradient(circle at 0 100%, rgba(204,0,0,0) 14px, transparent 15px);
}

.btnright
{
    right:-50%;
    border-radius: 10% 100% 0px 0px;
}

.btnleft:after
{
    right:18px;
    //this will need to be changed if you are changing the width/height of the .btn
    background:
        linear-gradient(135deg, transparent 10px, red 0) top left,
        linear-gradient(225deg, transparent 10px, red 0) top right,
        linear-gradient(315deg, transparent 10px, red 0) bottom right,
        linear-gradient(45deg,  transparent 10px, red 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;

    background-image:
        radial-gradient(circle at 0 0, rgba(204,0,0,0) 23px, red 23px),
        //the above line is the top left corner, if changing '23px' you can affect the slope, but apply changes to both
        radial-gradient(circle at 100% 0, rgba(204,0,0,0) 23px, transparent 23px),
        radial-gradient(circle at 100% 100%, rgba(204,0,0,0) 14px, transparent 23px),
        radial-gradient(circle at 0 100%, rgba(204,0,0,0) 23px, transparent 15px);
}

.btnleft
{
    left:-50%;
    border-radius: 100% 10% 0px 0px;
}

Here's a purely CSS solution using radial gradients as found on here http://lea.verou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/

Though to be honest I don't know how useful this would be, it's quite fiddly and pretty sure it's not cross-browser compatible, better to just use background-images.. still i thought it was an interesting technique.

Upvotes: 1

Eric Liang
Eric Liang

Reputation: 124

I found this online. It talks about making the bottom inverted border radius which looks like if you play around with what they have, you should be able to eventually get the result you desire. Hope it helps. Good luck! http://jonmifsud.com/blog/inverse-border-radius-in-css/

Upvotes: 0

user3608720
user3608720

Reputation: 11

This cannot be done with CSS. You need to slice out the graphic in 3 and drop it in as a background. This is how the button divs should roughly present:

<div class="navigation-container">

  <div class="navigation-button">
    <div class="navigation-left-bg"></div>
    <div class="navigation-body"></div>
    <div class="navigation-right-bg"></div>
  </div>

... Add more buttons here

</div>

Navigation button inline divs should float left. Let us know if you can't figure out any of the other CSS involved.

Upvotes: 0

Related Questions