Button side features an inverse curve shape

Question

Button side features an inverse curve shape

I've come up with a design for some "button tabs" where one side is curved, making it tricky to implement border radius. I'm wondering if this kind of curve is even possible without using images. Any tips on how to achieve this or any resources I can explore? My attempts so far have not been successful.

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 the result I came up with, check it out here: https://codepen.io/andrelange91/pen/YzPqJXO

It's not perfectly curved but it's pretty close!

html css

Answer 1

Answer №1

To create unique and visually appealing design elements, you can experiment with the border-radius, transform, and transform-origin properties in CSS. Here is an example of how you can achieve slanted tabs using these properties:

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

In addition to this technique, you can also utilize radial gradients to enhance your design further:

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>

Answer 2

To create unique and visually appealing design elements, you can experiment with the border-radius, transform, and transform-origin properties in CSS. Here is an example of how you can achieve slanted tabs using these properties:

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

In addition to this technique, you can also utilize radial gradients to enhance your design further:

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>

Answer 3

Answer №2

While this may not perfectly match the specific shape you desire, it does offer a demonstration of the technique I outlined in the previous comments for achieving it. Simply adjust the values within ::before and ::after to achieve your desired result.

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

For further guidance, refer to Creating s-shaped curve using css

Answer 4

While this may not perfectly match the specific shape you desire, it does offer a demonstration of the technique I outlined in the previous comments for achieving it. Simply adjust the values within ::before and ::after to achieve your desired result.

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

For further guidance, refer to Creating s-shaped curve using css

Button side features an inverse curve shape

Answer №1

Answer №2

Similar questions

When a child of a flex-item does not inherit the height of its parent in a flex container with a column direction and flex-basis set

Issue with Bootstrap 5 grid system, div falling down

Ways to specifically load a script for Firefox browsers

Avoid the URL colon being converted to %3A

Generate a distinct identifier for the select element ID whenever a new row of data is inserted into a table

How to eliminate the validation icon from a select tag in Bootstrap 5?

The functions domElement.getClientWidth() and domElement.getClientHeight() are returning a value of 0

How about placing one element above another? What sets apart using the margin property versus the position property for achieving this effect?

Manipulating classes with JQuery through click events

Validating the Javascript on my report page

creating a dictionary with headers and body using beautiful soup

Adjust the height of the rows in the column to match the height of the parent

Turning off arrow key navigation for tabs in Material UI ReactJS

Is it necessary to include CDN @imports when optimizing CSS files in a Require.js/Backbone app using r.js?

transform the stationary drawing to the top and left position at coordinate (0,0)

Incorporate a background image property using Jquery

Instructions on how to prompt users to register using a distinctive code

Enhancing the asp.net MVC link element with an ID property

Tips for vertically aligning table cells within Bootstrap

Creating a Stylish ExtJS Container with CSS: A Step-By-Step