2024-10-11 08:41:55 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8" />
|
|
|
|
|
<title>SVG border</title>
|
|
|
|
|
<meta data-hid="viewport" name="viewport" content="width=device-width,initial-scale=1" />
|
|
|
|
|
<link rel="stylesheet" type="text/css" href="style.css" />
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
2024-10-11 10:40:38 +00:00
|
|
|
<main>
|
|
|
|
|
<p>regular box with <code>border: 1px solid black;</code></p>
|
2024-10-11 08:41:55 +00:00
|
|
|
<div class="box">
|
|
|
|
|
<div class="icon">
|
|
|
|
|
<img src="sale.svg" width="100" height="80" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="text">
|
|
|
|
|
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
|
|
|
|
|
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
|
|
|
|
|
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
|
|
|
|
|
no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
|
|
|
|
|
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
|
|
|
|
|
dolore magna aliquyam erat, sed diam voluptua.
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-10-11 10:40:38 +00:00
|
|
|
<p>same box but styled with <code>boder-image</code>. Of course, you can use PNG or even JPEG
|
|
|
|
|
to achieve the same but SVG keep their high quality, no matter how small or large the box is.</p>
|
2024-10-11 08:41:55 +00:00
|
|
|
<div class="box box--wobbly-border">
|
|
|
|
|
<div class="icon">
|
|
|
|
|
<img src="sale.svg" width="100" height="80" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="text">
|
|
|
|
|
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
|
|
|
|
|
tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
|
|
|
|
|
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
|
|
|
|
|
no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
|
|
|
|
|
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
|
|
|
|
|
dolore magna aliquyam erat, sed diam voluptua.
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2024-10-11 10:40:38 +00:00
|
|
|
|
|
|
|
|
<p>for reference, here's the original SVG used for styling:</p>
|
2024-10-11 08:41:55 +00:00
|
|
|
<img src="box.svg" />
|
2024-10-11 10:40:38 +00:00
|
|
|
</main>
|
2024-10-11 08:41:55 +00:00
|
|
|
</body>
|
|
|
|
|
</html>
|
