CSS design like Border Radius

Question

I am wondering if this is possible using border radius.

What I want is if I click the menu I want the active state to be something like this. But I don't know if it's possible using border radius.

The only code I have done so far is using the

 border-radius:10px;

but what I want is something like that on the image.

Answer 1

You can use pseudo element and make a triangle which overlaps over the menu item with menu background color:

For eg:

li{
  position: relative;
  }
li:after{
       content: "";
       width: 0;
       height: 0;
       border-style: solid;
       border-width: 0 20px 20px 0;/*manage px values from 20 to what your need suits*/
       border-color: transparent #007bff transparent;/*use menu bg color instead of #007bff*/
       position: absolute;
    }

<ul>
  <li>menu item</li>
</ul>

Answer 2

Try like this: Demo

<ul>
    <li>Menu 1</li>
    <li class="active">Menu 1</li>
    <li>Menu 1</li>
    <li>Menu 1</li>
</ul>

CSS:

body {
    background-color:#E7D7B7;
}
ul li {
    display:inline-block;
    float:left;
    margin-right:10px;
    position:relative;
    padding:5px 50px 5px 5px;
}
ul li.active {
    display:inline-block;
    float:left;
    background-color:#CA8E26;
    margin-right:10px;
    position:relative;
    padding-right:50px;
}
li.active:after {
    border-style: solid;
    border-width: 0 28px 28px 0;
    border-color: transparent #E7D7B7 transparent transparent;
    content:"";
    position:absolute;
    top:0;
    right:0;
}

Upto my knowledge, its not advisable to use border-radius. might be pseudo Elements will work. You can adjust border width (28px) according to li's height and padding. Use border color as menu bar color. so it will merge with background.

Answer 3

Try border-right: 30px solid transparent; on active state. I think this will solve your problem.