How could I create the curve like the top blue border with Tailwind CSS classes explicitly not using CSS stylesheet?
Asked
Active
Viewed 1,402 times
2
-
It is not possible to create this exact curve with tailwind, it is too specific. You can create an svg with some svg drawer, or do it with classic css – Johan Dec 28 '22 at 09:57
-
Please provide [mcve] – Sfili_81 Dec 28 '22 at 10:05
-
this is not a tailwindcss related question. you have to use custom classes or arbitrary values. – doğukan Dec 28 '22 at 14:42
1 Answers
2
Edit: After some research, i figured out a way to achieve this.
Rounded Border:
<div class="overflow-x-hidden">
<div class="absolute bottom-0 mt-[100px] ml-[-50%] h-[500px] w-[200%] rounded-t-[100%] bg-gradient-to-b from-blue-400 via-blue-500 to-blue-600">
<div class="mt-5 text-center text-2xl text-white">Footer</div>
</div>
</div>
Output:
Rounded Corners:
Using rounded class with attribute value for simple curve at corners.
<div class="h-[100px] rounded-t-[100px] bg-blue-500">
<div class="p-5 text-center text-2xl text-white">Footer</div>
</div>
Output:
Refer: https://play.tailwindcss.com/fV3c2H8TOu for further changes
krishnaacharyaa
- 14,953
- 4
- 49
- 88
-
thank for your suggestion ,but I don't want the top border to be horizontal – 林廷奕 Dec 28 '22 at 11:31
-
Please find the changes in the edit. i have edited the answer according to your requirement . – krishnaacharyaa Dec 28 '22 at 12:53