-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path2.html
61 lines (35 loc) · 7.15 KB
/
2.html
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
55
56
57
58
59
60
61
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body { background-color: burlywood; }
#stick {
transform: rotate(-7.7deg);
filter: drop-shadow(5px 8px 3px rgb(0 0 0 / 0.2));
-webkit-filter: drop-shadow(5px 8px 3px rgb(0 0 0 / 0.2));
}
#stick .container{
display:inline-block;
height: 40px;
clip-path: polygon(6.99465px 5.98387px, 6.99465px 5.98387px, 7.54627254px 4.978025694px, 8.20012752px 4.053755192px, 8.94714798px 3.216783118px, 9.77826696px 2.472834096px, 10.6844175px 1.82763275px, 11.65653264px 1.286903704px, 12.68554542px 0.856371582px, 13.76238888px 0.541761008px, 14.87799606px 0.348796606px, 16.0233px 0.283203px, calc(100% - 15.6048px) 0.283203px, calc(100% - 15.6048px) 0.283203px, calc(100% - 14.4594953px) 0.348796606px, calc(100% - 13.3438864px) 0.541761008px, calc(100% - 12.2670411px) 0.856371582px, calc(100% - 11.2380272px) 1.286903704px, calc(100% - 10.2659125px) 1.82763275px, calc(100% - 9.3597648px) 2.472834096px, calc(100% - 8.5286519px) 3.216783118px, calc(100% - 7.7816416px) 4.053755192px, calc(100% - 7.1278017px) 4.978025694px, calc(100% - 6.5762px) 5.98387px, calc(100% - 1.3381px) calc(50% - 4.5161px), calc(100% - 1.3381px) calc(50% - 4.5161px), calc(100% - 0.98839599999999px) calc(50% - 3.6878408px), calc(100% - 0.71640399999998px) calc(50% - 2.8385144px), calc(100% - 0.52212400000001px) calc(50% - 1.9733876px), calc(100% - 0.405556px) calc(50% - 1.0977272px), calc(100% - 0.36670000000001px) calc(50% - 0.2168px), calc(100% - 0.405556px) calc(50% - -0.6641272px), calc(100% - 0.52212400000001px) calc(50% - -1.5397876px), calc(100% - 0.71640399999998px) calc(50% - -2.4049144px), calc(100% - 0.98839599999999px) calc(50% - -3.2542408px), calc(100% - 1.3381px) calc(50% - -4.0825px), calc(100% - 6.5762px) calc(100% - 6.4175px), calc(100% - 6.5762px) calc(100% - 6.4175px), calc(100% - 7.1278017px) calc(100% - 5.4116572px), calc(100% - 7.7816416px) calc(100% - 4.4873856px), calc(100% - 8.5286519px) calc(100% - 3.6504104px), calc(100% - 9.3597648px) calc(100% - 2.9064568px), calc(100% - 10.2659125px) calc(100% - 2.26125px), calc(100% - 11.2380272px) calc(100% - 1.7205152px), calc(100% - 12.2670411px) calc(100% - 1.2899776px), calc(100% - 13.3438864px) calc(100% - 0.97536239999999px), calc(100% - 14.4594953px) calc(100% - 0.7823948px), calc(100% - 15.6048px) calc(100% - 0.71680000000001px), 16.0233px calc(100% - 0.7168px), 16.0233px calc(100% - 0.7168px), 14.87799633px calc(100% - 0.78239479999999px), 13.76238984px calc(100% - 0.97536239999999px), 12.68554731px calc(100% - 1.2899776px), 11.65653552px calc(100% - 1.7205152px), 10.68442125px calc(100% - 2.26125px), 9.77827128px calc(100% - 2.9064568px), 8.94715239px calc(100% - 3.6504104px), 8.20013136px calc(100% - 4.4873856px), 7.54627497px calc(100% - 5.4116572px), 6.99465px calc(100% - 6.4175px), 1.75655px calc(50% - -4.0825px), 1.75655px calc(50% - -4.0825px), 1.40684816px calc(50% - -3.2542408px), 1.13485784px calc(50% - -2.4049144px), 0.94057904px calc(50% - -1.5397876px), 0.82401176px calc(50% - -0.6641272px), 0.785156px calc(50% - 0.2168px), 0.82401176px calc(50% - 1.0977272px), 0.94057904px calc(50% - 1.9733876px), 1.13485784px calc(50% - 2.8385144px), 1.40684816px calc(50% - 3.6878408px), 1.75655px calc(50% - 4.5161px), 6.99465px 5.98387px);
-webkit-clip-path: polygon(6.99465px 5.98387px, 6.99465px 5.98387px, 7.54627254px 4.978025694px, 8.20012752px 4.053755192px, 8.94714798px 3.216783118px, 9.77826696px 2.472834096px, 10.6844175px 1.82763275px, 11.65653264px 1.286903704px, 12.68554542px 0.856371582px, 13.76238888px 0.541761008px, 14.87799606px 0.348796606px, 16.0233px 0.283203px, calc(100% - 15.6048px) 0.283203px, calc(100% - 15.6048px) 0.283203px, calc(100% - 14.4594953px) 0.348796606px, calc(100% - 13.3438864px) 0.541761008px, calc(100% - 12.2670411px) 0.856371582px, calc(100% - 11.2380272px) 1.286903704px, calc(100% - 10.2659125px) 1.82763275px, calc(100% - 9.3597648px) 2.472834096px, calc(100% - 8.5286519px) 3.216783118px, calc(100% - 7.7816416px) 4.053755192px, calc(100% - 7.1278017px) 4.978025694px, calc(100% - 6.5762px) 5.98387px, calc(100% - 1.3381px) calc(50% - 4.5161px), calc(100% - 1.3381px) calc(50% - 4.5161px), calc(100% - 0.98839599999999px) calc(50% - 3.6878408px), calc(100% - 0.71640399999998px) calc(50% - 2.8385144px), calc(100% - 0.52212400000001px) calc(50% - 1.9733876px), calc(100% - 0.405556px) calc(50% - 1.0977272px), calc(100% - 0.36670000000001px) calc(50% - 0.2168px), calc(100% - 0.405556px) calc(50% - -0.6641272px), calc(100% - 0.52212400000001px) calc(50% - -1.5397876px), calc(100% - 0.71640399999998px) calc(50% - -2.4049144px), calc(100% - 0.98839599999999px) calc(50% - -3.2542408px), calc(100% - 1.3381px) calc(50% - -4.0825px), calc(100% - 6.5762px) calc(100% - 6.4175px), calc(100% - 6.5762px) calc(100% - 6.4175px), calc(100% - 7.1278017px) calc(100% - 5.4116572px), calc(100% - 7.7816416px) calc(100% - 4.4873856px), calc(100% - 8.5286519px) calc(100% - 3.6504104px), calc(100% - 9.3597648px) calc(100% - 2.9064568px), calc(100% - 10.2659125px) calc(100% - 2.26125px), calc(100% - 11.2380272px) calc(100% - 1.7205152px), calc(100% - 12.2670411px) calc(100% - 1.2899776px), calc(100% - 13.3438864px) calc(100% - 0.97536239999999px), calc(100% - 14.4594953px) calc(100% - 0.7823948px), calc(100% - 15.6048px) calc(100% - 0.71680000000001px), 16.0233px calc(100% - 0.7168px), 16.0233px calc(100% - 0.7168px), 14.87799633px calc(100% - 0.78239479999999px), 13.76238984px calc(100% - 0.97536239999999px), 12.68554731px calc(100% - 1.2899776px), 11.65653552px calc(100% - 1.7205152px), 10.68442125px calc(100% - 2.26125px), 9.77827128px calc(100% - 2.9064568px), 8.94715239px calc(100% - 3.6504104px), 8.20013136px calc(100% - 4.4873856px), 7.54627497px calc(100% - 5.4116572px), 6.99465px calc(100% - 6.4175px), 1.75655px calc(50% - -4.0825px), 1.75655px calc(50% - -4.0825px), 1.40684816px calc(50% - -3.2542408px), 1.13485784px calc(50% - -2.4049144px), 0.94057904px calc(50% - -1.5397876px), 0.82401176px calc(50% - -0.6641272px), 0.785156px calc(50% - 0.2168px), 0.82401176px calc(50% - 1.0977272px), 0.94057904px calc(50% - 1.9733876px), 1.13485784px calc(50% - 2.8385144px), 1.40684816px calc(50% - 3.6878408px), 1.75655px calc(50% - 4.5161px), 6.99465px 5.98387px);
background-color: #ffffff;
}
#stick span { display: inline-block; position: relative; top: 50%;
transform: translateY(-50%); padding: 0px 21px 0px 21px;
font-family: Rubik, Arial, Helvetica, sans-serif; font-weight: 900; font-size: 21px;
</style>
</head>
<body>
<video muted playsinline>
<source src="movie-hevc.mov" type='video/mp4;codecs=hvc1'>
</video>
<div id="stick"> <div class="container"><span>2 HTMNL</span></div></div>
<div id="stick" style="margin-top: 50px"> <div class="container"><span>ПРЕМЬЕРА</span></div></div>
<div id="stick" style="margin-top: 50px"> <div class="container"><span>НОВОЕ ШОУ</span></div></div>
</body>
</html>