-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
70 lines (56 loc) · 3.35 KB
/
index.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
62
63
64
65
66
67
68
69
70
<!doctype html>
<html lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS3 Exclusions - Hongkiat.com</title>
<!-- jquery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../_nav/js/jquery.js"><\/script>')</script>
<!-- demo scripts -->
<link rel="stylesheet" href="css/style.css">
<!-- nav script -->
<script src="../_nav/js/nav.js" type="text/javascript"></script>
</head>
<body>
<!-- nav meta -->
<div class="demo-meta">
<h1 class="demo-title">CSS3 Exclusions</h1>
<p class="demo-desc">This demo shows some basic example of CSS3 exclusions application.</p>
</div>
<!-- demo content -->
<div class="demo-wrapper">
<div class="alert">See this demo in Chrome with Experimental Feature enabled</div>
<h3>Basic Shape</h3>
<div class="basic-shape">
Lo­rem ipsum dolor sit amet, con­sectetur ad­ipis­icing elit, sed do eius­mod tem­por incidid­unt ut labore et dol­ore magna ali­qua. Ut enim ad minim veniam, quis nostrud exercita­tion ullam­co labo­ris nisi ut ali­quip ex ea com­modo conse­quat. Duis aute irure dolor in reprehend­erit in volup­tate velit es­se cil­lum dolore eu fug­iat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<h4>Code</h4>
<pre>
div {
font-size: 12px;
width: 300px;
height: 300px;
overflow: hidden;
text-align: justify;
-webkit-hyphens: manual;
-webkit-shape-inside: polygon(0px 0px, 0 300px, 300px 300px);
}
</pre>
<h3>Complex Shape</h3>
<div class="svg-shape">
Lo­rem i­ps­um do­lor sit amet, con­sectetur ad­ipis­icing elit, sed do eius­mod tem­por incidid­unt ut lab­ore et dol­ore magna ali­qua. Ut enim ad minim veniam, quis no­strud exercita­tion ullam­co labo­ris nisi ut ali­quip ex ea com­modo conse­quat. Duis aute iru­re dolor in reprehend­erit i­n vo­l­up­ta­te ve­lit es­se cil­lum do­lo­re e­u fug­ia­t n­ulla pari­atur. Ex­cept­eur si­nt occa­ecat cupi­dat­at non pro­ident, su­nt in cul­pa qui offi­cia dese­runt mollit anim id est la­borum. Lo­rem i­ps­um do­lor sit amet, con­sectetur ad­ipis­icing elit, sed do eius­mod tem­por incidid­unt ut lab­ore et dol­ore magna ali­qua. Ut enim ad minim veniam, quis no­strud exercita­tion ullam­co labo­ris nisi ut ali­quip ex ea com­modo conse­quat. Duis aute iru­re dolor in reprehend­erit i­n vo­l­up­ta­te ve­lit es­se cil­lum do­lo­re e­u fug­ia­t n­ulla pari­atur. Ex­cept­eur si­nt occa­ecat cupi­dat­at non pro­ident, su­nt in cul­pa qui offi­cia dese­runt mollit anim id est la­borum.
</div>
<h4>Code</h4>
<pre>
div {
font-size: 12px;
width: 300px;
height: 269px;
overflow: hidden;
text-align: justify;
-webkit-hyphens: manual;
-webkit-shape-inside: polygon(75.778px 272.829px, 1.555px 144.271px, 75.778px 15.713px, 224.222px 15.713px, 298.444px 144.271px, 224.222px 272.829px);
}
</pre>
</div>
</body>
</html>