CODEWITHSUNDEEP
htmlcsstailwind-csssidebarclip-path
Laxman
Laxman

Reputation: 19

i want to design a design a sidebar with concave rounded corners on the top and bottom edges for the right side using HTML, CSS, and Tailwind CSS?

I am designing a sidebar where the active item should have concave curves on the top-right and bottom-right corners. I'm using Tailwind CSS for styling, and I initially tried setting borderTopRightRadius: '0%' and borderBottomRightRadius: '0%', but it results in straight lines, not the concave curves I want. Here's a sample of what I want to achieve (include image here).

How can I style my sidebar so that when an item is active, the right side has concave curves, both upwards and downwards?

<li
  className={`flex rounded-3xl w-[115%] p-2 cursor-pointer text-gray-300 text-sm items-center gap-x-2 ${
    location.pathname === menu.path ? 'active-item' : ''
  } hover:bg-white hover:text-black transition duration-300`}
>
  <Link to={menu.path} className="flex items-center gap-x-4 w-full">
    <span className="icon">{menu.icon}</span>
    <span className={`${!open && 'hidden'} origin-left duration-200`}>
      {menu.title}
    </span>
  </Link>
</li>

enter image description here

What I Tried:

Desired Design: I want the right side of the active menu item to have a concave curve similar to what you can see in this image (attach your reference image).

Solution Needed: How can I use Tailwind CSS or custom CSS to get concave curves on the top-right and bottom-right corners of the active sidebar item?

enter image description here

[sidebar which i have created.]

Upvotes: -3

Views: 344

Answers (2)

Manish Patil
Manish Patil

Reputation: 1

This might be helpful: Codepen Link

<div class="outerbox">
  <div class="innerbox select">
    Home
</div>
  <div class="innerbox select">
    Contact
</div>
  <div class="innerbox">
    Profile
</div>
</div>

.outerbox {
  overflow: hidden;
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100px;
  background-color: red;
  padding: 20px 0 20px 20px;
  color: #fff;
}

.innerbox {
  padding: 1.5rem 10px;
  position: relative;
  background-color: red;
  transition: all 0.3s ease;
}


.select::after {
  position: absolute;
  top: -20px;
  right: 0;
  content: "";
  width: 120px;
  height: 30px;
  background-color: red;
  border-radius: 100px;
}

.select::before {
  position: absolute;
  content: "";
  width: 120px;
  height: 30px;
  border-radius: 100px;
  background-color: red;
  bottom: -20px;
  right: 0;
}

.innerbox:hover {
  background-color: white;
  color: red;
}

Upvotes: 0

Naeem Akhtar
Naeem Akhtar

Reputation: 1270

This might not be full answer. I am providing this to you this so that you can take from here.

<section>
  <div class="card">
    <div class="holder container">
      <div class="button"></div>
    </div>
  </div>
</section>



* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body {
    display: grid;
    place-items: center;
    min-height: 100vh;
    font-family: system-ui, sans-serif;
}
p {
    font-size: 1.5em;
}
h3 {
    grid-column: 1 / -1;
    margin-block-start: 1em;
    text-align: center;
    font-weight: 400;
}
section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12em, 1fr));
    gap: 1rem;
    place-content: center;
    width: 75%;
    margin-block: 2em;
}

.card {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    background: #fb3e21;
    border-radius: 1em;
    position: relative;
}

.holder {
    position: absolute;
    display: grid;
    place-items: center;
    width: 6em;
    height: 4em;
    background: #fff;
}
.holder::before, 
.holder::after {
  position: absolute;
  content: "";
  width: 3.65em;
  height: 1.25em;
  background: transparent;
}

.container {
    inset: calc(50% - 2em) 0 0 calc(100% - 10em);
    border-top-left-radius: 2.25em;
    border-bottom-left-radius: 2.25em;
}
.container::before {
    inset: -1.25em 0 0 calc(100% - .25em);
  border-bottom-right-radius: 1.25rem;
  box-shadow: 0.3em 0.3em 0 0.3em #fff;
}
.container::after {
    inset: 100% 0 0 calc(100% - .25em);
  border-top-right-radius: 1.25em;
  box-shadow: 0.3em -0.3em 0 0.3em #fff;
}

.button:hover .one {
    background: green;
}
.button:hover .one::before {
  box-shadow: 0.3em 0.3em 0 0.3em #ffb200;
}
.button:hover .one::after {
  box-shadow: 0.3em 0.3em 0 0.3em #ffb200;
}

.button {
    width: 3em;
    background: green;
    border-radius: 25px;
    z-index: 1;
    width: 200px;
    height: 50px;
    margin-left: 10px;
}

Upvotes: -1

Related Questions