0

I giving an indicator to menu items using border property and I want it to be rounded backwards as in the image below:

enter image description here

I tried using border-radius but this is the result:

enter image description here

Also feel free to suggest different approaches for implementing an indicator for sidebar menus in react since I'm not sure if this is possible using css properties.

tacoshy
  • 10,642
  • 5
  • 17
  • 34
Amir B
  • 28
  • 5
  • The similar question tagged here is for inverting the rounded corners while my question is how to horizontally flip the rounded corners. I don't think they have the same answer. – Amir B Feb 01 '22 at 21:27

3 Answers3

2

Just use before and add an element to style

div {
  position: relative;
  display: inline-block;
  background-color: blue;
  width: 10em;
  height: 10em;
}

div::before{
  display: block;
  position: relative;
  content: '';
  width: 10%;
  top: 15%;
  height: 70%;
  background-color: white;
  border-top-right-radius: 1em;
  border-bottom-right-radius: 1em;
}
<div></div>
epascarello
  • 204,599
  • 20
  • 195
  • 236
0

Try using CSS-Tricks' Infinite Borders technique and applying border-radius. This method will require borders and box-shadow and not outline.

    img { border-radius: 4px;
 /* #1 */ border: 5px solid hsl (0, 0%, 40%);
 /* #2 */ padding: 5px; background: hsl (0, 0%, 20%);
 /* #3 outline: 5px solid hsl (0, 0%, 60%);
 */ /* #4 AND INFINITY......!!!
Raphael Marques
  • 699
  • 4
  • 16
  • Could you edit your answer and use tag to insert code for more readability ? :) [See markdown help](https://stackoverflow.com/editing-help#code) – Thibault Bach Feb 01 '22 at 20:20
  • I don't understand how this relates to the shape that I want. could you elaborate? – Amir B Feb 01 '22 at 20:54
0

Mate, Atleast post your code with the question so that people can help you and advise you how to correct it.

P.S - I know this belongs in the comment and not an answer but I am new to Stack Overflow and I don't have points to comment on anything

Shlok Talati
  • 29
  • 5
  • 1
    Mate, There is no code; This is pure css and I think I clearly showed the desired shape with images. – Amir B Feb 01 '22 at 21:29