| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>Cyber mouse</title>
- <style>
- @layer picture-border{
- picture {
- display: grid;
- width: 400px;
- aspect-ratio: 4/3;
- --bc: red; /*border-color*/
- --bs: 10px; /*border-size*/
- --cs: 20px; /*cut-size*/
- grid-template-rows: var(--cs) auto 1fr;
- }
- picture > figcaption {
- grid-area: 1/1/2/2;
- justify-self: end;
- min-width: 50%;
- min-height: calc(var(--cs) * 2 + var(--bs));
- display: grid;
- place-items: center;
- text-align: center;
- background-color: var(--bc);
- clip-path: polygon(
- var(--cs) 0,
- 100% 0,
- 100% 100%,
- 0 100%,
- 0 var(--cs)
- );
- }
- picture > img{
- grid-area: 2/1/4/2;
- width: 100%;
- height: 100%;
- object-fit: cover;
- --em: .5;
- clip-path: polygon(
- calc(var(--cs) + var(--bs) * var(--em)) var(--bs),
- calc(100% - var(--bs)) var(--bs),
- calc(100% - var(--bs)) calc(100% - var(--cs) - var(--bs)),
- calc(50% + var(--cs) - var(--bs) * var(--em)) calc(100% - var(--cs) - var(--bs)),
- calc(50% - var(--bs) * var(--em)) calc(100% - var(--bs)),
- var(--bs) calc(100% - var(--bs)),
- var(--bs) calc(var(--cs) + var(--bs) * var(--em))
- );
- }
- picture::before{ /*border*/
- content: "";
- grid-area: 2/1/4/2;
- background-color: var(--bc);
- clip-path: polygon(
- var(--cs) 0,
- 100% 0,
- 100% calc(100% - var(--cs)),
- calc(50% + var(--cs)) calc(100% - var(--cs)),
- 50% 100%,
- 0% 100%,
- 0 var(--cs)
- );
- }
- }
- @layer demo {
- html, body { height: 100% }
- body { margin: 0; display: grid; place-items: center; background-color: black}
- }
- </style>
- </head>
- <body>
- <picture>
- <img src="mouse.png" alt="mouse">
- <figcaption>Mouse</figcaption>
- </picture>
- <script>
- // https://codepen.io/MarkBoots/pen/bGJJpMj
- </script>
- </body>
- </html>
|
