0

I have a problem implementing a button with **CSS **and the concept of this button is like the picture below.

I found that the better solution can be **polygon **and clip-path property, but it is true that when you use polygon, you can't set radius for the corners.

Notice: It is important to find a solution that can utilize dynamic content and dynamic sizes of elements.

This is the concept:

The Concept of my button that I have to implement

And this is my implementation with clip-path:polygons (tailwindcss).

<div
 class="w-[172px] h-12 mb-10 bg-[#F5910D] flex items-center justify-center"
 style="clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)"
 >
     <span class="text-white text-lg font-bold">All Products</span>
 </div>

enter image description here

Does anyone have any solution?

I tried to use SVG filter and the stdDeviation attribute but it wasn't working for polygons.

Improve this question
7
  • 1
    You polygone could be written with enough "points" to emulate rounded corners. Or you use path instead of a polygone. Commented Nov 21, 2023 at 10:05
  • That is right. But if I want to have an element with dynamic width and height and also with dynamic content, I have to generate different numbers of points to make the same radius. Also using path maybe has this issue with dynamic size and content. Commented Nov 21, 2023 at 10:10
  • "And this is my implementation with polygons (tailwindcss)." - so where in there exactly are the polygons hiding? Also, hard to tell from your image, if you only want the lower left and upper right corners rounded, or more. Commented Nov 21, 2023 at 10:18
  • Sorry the html code was wrong. I changed it. Commented Nov 21, 2023 at 10:30
  • 1
    Box shadow could still be implemented via a pseudo element, that gets the same clip-path and rounded borders assigned, jsfiddle.net/wm6k84yz But anything with "outlines" will hardly work with any solutions that depend on overlapping multiple elements. Commented Nov 21, 2023 at 12:39
Related questions
5098
How can I horizontally center an element?
3348
How do I disable the resizable property of a textarea?
2302
How can I select an element with multiple classes in jQuery?
Load 6 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.