1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54
| <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bordures avec background-image</title>
<meta name="Author" content="NoSmoking">
<style>
.cadre {
width: 30em;
height: 10em;
margin: 1em auto;
box-sizing: border-box;
}
.coin-carre {
--ep: 3px;
--long: 30%;
--haut: 30%;
--coul: #069;
padding: calc( .5em + var(--ep));
background-image:
linear-gradient(var(--coul), var(--coul)),
linear-gradient(var(--coul), var(--coul)),
linear-gradient(var(--coul), var(--coul)),
linear-gradient(var(--coul), var(--coul)),
linear-gradient(var(--coul), var(--coul)),
linear-gradient(var(--coul), var(--coul)),
linear-gradient(var(--coul), var(--coul)),
linear-gradient(var(--coul), var(--coul));
background-size:
var(--long) var(--ep), var(--long) var(--ep), /* horizontales à gauche */
var(--long) var(--ep), var(--long) var(--ep), /* horizontales à droite */
var(--ep) var(--haut), var(--ep) var(--haut), /* verticales en haut */
var(--ep) var(--haut), var(--ep) var(--haut), /* verticales en bas */
100%;
background-position:
top left, bottom left,
top right, bottom right,
top right, top left,
bottom left, bottom right;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="cadre coin-carre">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Vestibulum ultricies laoreet orci, sit amet molestie nulla efficitur ac.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</p>
</div>
</body>
</html> |
Partager