CSS-Secret/bevel-corners.html at master · Tan12/CSS-Secret · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bevel corners</title>
    <style>
        div{
            border: 21px solid transparent;
            border-image: 1 url('data:image/svg+xml,\
	                      <svg xmlns="http://www.w3.org/2000/svg" width="3" height="3" fill="%2358a">\
	                      <polygon points="0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2" />\
	                      </svg>');
            background: #58a;
            background-clip: padding-box;

            padding: .2em .3em;
            max-width: 12em;
            color: white;
            font: 150%/1.6 Baskerville, Palatino, serif;
        }
    </style>
</head>
<body>
    <div>
        <p>Hey, focus! You’re supposed to be looking at my corners, not reading my text. The text is just placeholder!</p>
    </div>
</body>
</html>