Fancy sidebar with rounded borders for selected navigation item with HTML and CSS-CodePudding

I want to create the sidebar shown in the image below using HTML and CSS. Rounding the borders on the left side of a selected link is no problem, but I have no idea how to round the borders on the right side.

CodePudding user response：

You can do it using the ::after pseudo element of your li element. If you position it absolutely then you can create a block that covers over the parent div. Use clip path to make the shape you want and fiddle around with the sizing until you get it aligned. The example below still needs a bit of tweaking but I'll leave that to you.

There's a couple of useful resources I use for this. The first is the svg path builder at mavo.io. Use this to make the SVGs look how you want. Then there's this handy clip path converter on github. It recodes your SVG then gives you the necessary html and css to use to clip your elements.

.sidebar {
  font-size: 1.5rem;
  color: white;
  width: fit-content;
  background-color: black;
  padding: 1rem;
}

.menulist {
  padding-left: 0;
  list-style-type: none;
  width: 100%;
}

.menulist > li {
  position: relative;
  width: 100%;
  margin-block: 1rem;
  text-align: center;
}

.menulist > li:hover {
  background-color: white;
  color: black;
  border-top-left-radius: 100vh;
  border-bottom-left-radius: 100vh;
}

.menulist > li:hover::after {
  content: "";
  position: absolute;
  top: -1rem;
  left: 100%;
  bottom: -1rem;
  width: 1rem;
  background-color: white;
  background-size: cover;
  clip-path: url(#my-clip-path);
}

.svg {
  /*hide the SVG */
  position: absolute;
  width: 0;
  height: 0;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8 y gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<svg >
  <clipPath id="my-clip-path" clipPathUnits="objectBoundingBox"><path d="m0,0.25 a1,0.25,0,0,0,1,-0.25 l0,1 a1,0.25,0,0,0,-1,-0.25 l0,-0.5"></path></clipPath>
</svg>

<div class='sidebar'>
  <div class='title'>Test</div>
  <ul class='menulist'>
    <li><i ></i></li>
    <li><i ></i></li>
    <li><i ></i></li>
    <li><i ></i></li>
    <li><i ></i></li>
  </ul>
</div>

CodePudding user response：

You can give the selection a rectangular base and put semi-rounded mini squares in the top left and bottom left corners (see image). You can create those shapes by using the following CSS properties: border-bottom-right-radius (for top square) & border-top-right-radius (for bottom square). Position them in the corners of the base using absolute positioning and make their widths 100% (so that they touch the outer edge of the nav).

CSS trick to get curved base