0

so i have the following design for some "button tabs". Design on button tabs with inverted curve on one side

One side is curved, so border radius would not really be possible. But is this type of curve even possible ? or am i doomed to use some sort of image?

mostly looking for tips on how this might be accomplished, or somewhere i can look for a solution, since my previous tries to find a solution has yet to yield a result.

Html

<div class="tab-row">
    <button>All Products<div class="tab-row__counter">20</div></button>
    <button>Hardware<div class="tab-row__counter">20</div></button>
    <button>Virtual<div class="tab-row__counter">20</div></button>
    <button>Bundles<div class="tab-row__counter">20</div></button>
</div>

Css

.tab-row{
    button{
        background-color:$element-bg;
        border:0;
        color:$white;
        width:300px;
        height:90px;
        margin-right:20px;
        margin-top:40px;
        border-radius: 5px 100px 0 0;

        &:first-child{
            margin-left:40px;
        }
        .tab-row__counter{

        }
    }
}

This is what i ended up with as a result, https://codepen.io/andrelange91/pen/YzPqJXO

not exactly curved but close enough

andrelange91
  • 1,018
  • 3
  • 21
  • 48
  • 1
    No I believe it's possible.. you can create all sorts of curves with CSS and border radius. The trick is to make the tab and then append on the right hand side curve with either `::after` or modifying your html to have two divs per tab. One being the main tab body and the other just the right hand side curve – GBWDev Dec 11 '19 at 12:03
  • @GBWDev must admit, i dont have any idea how that would look. hmmm... – andrelange91 Dec 11 '19 at 12:04
  • I mean.. it might be easier to just create an SVG and use that – GBWDev Dec 11 '19 at 12:06
  • it might indeed, i always just liked using css whenever possible, if possible. – andrelange91 Dec 11 '19 at 12:07

2 Answers2

1

You can try the curves by using the border-radius, transform, and transform-origin properties like, 

/**
 * Slanted tabs with CSS 3D transforms
 * See http://lea.verou.me/2013/10/slanted-tabs-with-css-3d-transforms/
 */

body { padding: 50px;background:#20273d }

nav {
 position: relative;
 z-index: 1;
 white-space: nowrap;
}

nav a {
 position: relative;
 display: inline-block;
 padding: 1.5em 2em 1em 1em;
 color:#9a9a9a;
 text-decoration: none;
 margin: 0 -7px;
}



nav a::before {
 content: ''; /* To generate the box */
 position: absolute;
 top: 0; right: 0; bottom: .5em; left: 0;
 z-index: -1;
 border-radius: 10px 10px 0 0;
 background: #434f78;
 box-shadow: 0 2px hsla(0,0%,100%,.5) inset;
 transform: perspective(5px) rotateX(2deg);
 transform-origin: bottom left;
}


nav a.selected {
 z-index: 2;
  color:#FFF;
}
<nav class="left">
 <a href="#" class="selected">All Products</a>
 <a href="#">Hardware</a>
 <a href="#">Virtual</a>
</nav>

You can use radial gradient also,

body { padding: 50px;background:#20273d }

nav {
 position: relative;
 z-index: 1;
 white-space: nowrap;
}

nav a {
 position: relative;
 display: inline-block;
 padding: 1em 5em 1.2em 1em;
 color:#9a9a9a;
 text-decoration: none;
 margin: 0 -20px;
 border: 0px none;
}



nav a::before {
 content: ''; /* To generate the box */
 position: absolute;
 top: 0;
 right: 0;
 bottom: .5em;
 left: 0;
 z-index: -1;
 background: radial-gradient(circle at top right,transparent 5.8vw, #434f78 6.8vw);
 transform: perspective(10px) rotateX(1deg);
 transform-origin: bottom left;
 border: 0px none;
}


nav a.selected {
 z-index: 2;
  color:#FFF;
}
<nav class="left">
 <a href="#" class="selected">All Products</a>
 <a href="#">Hardware</a>
 <a href="#">Virtual</a>
</nav>
Rohan Kumar
  • 40,431
  • 11
  • 76
  • 106
0

Whilst this does not replicate the exact shape you're after, this does provide an example of the method I described in the comments in how to approach it. You will just need to edit the values in ::before and ::after to get it to your desired shape. 

.curve {
  background: blue;
  width: 50px;
  height: 75px;
  position: relative;
}

.curve:before {
  content: '';
  background-image: radial-gradient(circle at 100% 100%, rgba(204, 0, 0, 0) 100px, blue 100px);
  position: absolute;
  top: 0;
  left: 100%;
  width: 100px;
  height: 75px;
}

.curve:after {
  content: '';
  position: absolute;
  width: 50px;
  height: 75px;
  background: blue;
  border-radius: 0 0 100% 0 / 0 0 100% 0;
  top: 100%;
  left: 0;
}

.container {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.tab {
  height: 150px;
  width: 300px;
  background: red
}
<div class="container">
  <div class="tab"></div>
  <div class="curve"></div>
</div>

Also take a look at Creating s-shaped curve using css

GBWDev
  • 576
  • 5
  • 18