image-mask/demo.html at master · httpstersk/image-mask · 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
<!doctype html>
<html>

<head>
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
    <title>image-mask Demo</title>
    <script src="image-mask.js" type="module"></script>
</head>

<body>
    <image-mask shape="square" src="http://placehold.it/320/33b779/ffffff/"></image-mask>
    <image-mask shape="triangle" src="http://placehold.it/320/e7da66/ffffff/"></image-mask>
    <image-mask shape="circle" src="http://placehold.it/320/396ad4/ffffff/"></image-mask>
    <image-mask shape="rhombus" src="http://placehold.it/320/afaec0/ffffff/"></image-mask>
    <image-mask shape="parallelogram" src="http://placehold.it/320/d899c0/ffffff/"></image-mask>
    <image-mask shape="plus" src="http://placehold.it/320/123456/ffffff/"></image-mask>
    <image-mask shape="star" src="http://placehold.it/320/ffbfa0/ffffff/"></image-mask>
    <image-mask shape="squircle" src="http://placehold.it/320/f78536/ffffff/"></image-mask>
    <image-mask shape="octagon" src="http://placehold.it/320/98b4a6/ffffff/"></image-mask>
    <image-mask shape="ring" src="http://placehold.it/320/8dc6ff/ffffff/"></image-mask>
    <image-mask shape="hexagon" src="http://hejty.github.io/demos/image-mask/adrianne-ho.gif" title="Image with a short description" desc="Immage with a looooong description"></image-mask>
</body>

</html>