Can anyone tell me how to make non-rectangular header in html .? Like make circular or curved header. | Sololearn: Learn to code for FREE!
Nouvelle formation ! Tous les codeurs devraient apprendre l'IA générative !
Essayez une leçon gratuite
+ 1

Can anyone tell me how to make non-rectangular header in html .? Like make circular or curved header.

8th Aug 2021, 4:10 AM
Shubham Kumar
7 Réponses
+ 1
Use CSS clip-path() function to give a particular shape to the header. header{ height: 65vh; background-color: rgb(37, 142, 8); clip-path: polygon(0 0, 100% 0, 100% 50vh, 80% 60vh, 60% 50vh, 40% 60vh, 20% 50vh, 0 60vh); border-radius: 10em; }
8th Aug 2021, 4:49 AM
JaScript
JaScript - avatar
8th Aug 2021, 4:10 AM
Shubham Kumar
+ 1
Please describe more like you want to make a navigation menu or something else. You can use clip-path to give a shape to your header. Shubham Kumar see this - https://code.sololearn.com/WKxdmNHqbB2v/?ref=app
8th Aug 2021, 4:45 AM
VSR [ DEV ]
VSR [ DEV ] - avatar
+ 1
JaScript thanks a lot And can you please also tell me that how to bring text in center of header.
8th Aug 2021, 4:57 AM
Shubham Kumar
+ 1
Shubham Kumar Check out the code you will get that thing also. Use this- header{ text-align:center; }
8th Aug 2021, 5:01 AM
VSR [ DEV ]
VSR [ DEV ] - avatar
+ 1
text-align: center;
8th Aug 2021, 5:03 AM
JaScript
JaScript - avatar
+ 1
Thanks to both JaScript and Vats [ DEV ]
8th Aug 2021, 5:32 AM
Shubham Kumar