Créer des arrondis sur ou sous vos en-têtes ne nécessite pas forcément l’utilisation d’images jpeg, png ou SVG. Au contraire vous pouvez tout a fait vous en remettre à quelques lignes CSS pour obtenir un rendu satisfaisant.
Nous commençons par créer un document et quelques règles CSS rudimentaires pour intégrer un en-tête basique :
<!DOCTYPE html>
<html class="js no-touch" xmlns="http://www.w3c.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>Curved Header</title>
<link rel="canonical" href="" />
<meta name="description" content="a description" />
<link rel="stylesheet" type="text/css" href="curved-header.css" />
</head>
<body>
<header>
<div class="container">
<h1>curved-header</h1>
</div>
</header>
</body>
</html>* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-size: 62.5%;
}
body {
font-family: "Open Sans", sans -serif;
font-size: 1.5rem;
}
.container {
width: 80%;
max-width: 1200px;
margin: 0 auto;
}
header {
position: relative;
padding: 8% 0 16%;
background: linear-gradient(150deg, #0c6dea, #0cb6ea);
}
h1 {
position: relative;
color: #fff;
font-size: 3.4rem;
text-transform: uppercase;
text-align: center;
z-index: 999;
}Comme vous le voyez, le <header> reçoit une position relative permettant le positionnement ultérieur à l’aide d’un pseudo-élément :before() que nous allons créer dans la foulée. C’est aussi lui qui bénéficie d’un dégradé linéaire
Votre devis en 48 H chrono !
Demandez à être rappelé !
Nous préciserons ensemble votre projet
de vive voix
Notre <h1> est lui-aussi positionné pour autoriser l’utilisation d’un z-index.
Notre masque est ensuite créé à l’aide de :before() et positionné de façon absolue en fonction du radius défini. Une fonction scaleX() permettra de marquer d’avantage ou d’adoucir le rendu de la courbe.
header:before {
position: absolute;
content: "";
top: 52%;
left: 0;
width: 100%;
height: 100%;
background: #fff;
border-radius: 100%;
transform: scaleY(.8);
}Vous pourrez bien évidemment ajuster la couleur ou le dégradé en fonction de vos besoins, tout comme la valeur du radius et de la fonction scale() 😉