Comment faire une diagonale en HTML et CSS ?

Réponses rédigées par Antoine

Dernière mise à jour : 2021-07-01 11:25:41

Question

Comment faire pour tracer une diagonale responsive, dans un <div>, en HTML et CSS ?

Réponse

Pour tracer une diagonale responsive, dans une balise <div>, en HTML et CSS, vous pouvez utiliser les fonctions CSS linear-gradient et calc de la manière suivante :

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Comment faire une diagonale en HTML et CSS ?</title>
<style>
.diagonale {
  height:200px;
  width:100%;
  border:1px solid #000;
  background: linear-gradient(to top right, #CCC calc(50% - 2px), #000, #DDD calc(50% + 2px));
}
</style>
</head>
<body>
<div class="diagonale"></div>
</body>
</html>

Voici une démo pour scinder une balise <div> avec une diagonale responsive.