doc_inspector_highlighter_cssshapes.html (2455B)
1 <!-- Any copyright is dedicated to the Public Domain. 2 http://creativecommons.org/publicdomain/zero/1.0/ --> 3 <!DOCTYPE html> 4 <meta charset="utf-8"> 5 <style> 6 html, body { 7 height: 100%; 8 margin: 0; 9 } 10 .wrapper { 11 width: 800px; 12 height: 800px; 13 background: #f06; 14 } 15 #polygon { 16 clip-path: polygon(0 0%, 17 100px 50%, 18 200px 0, 19 300px 50%, 20 400px 0, 21 500px 50%, 22 600px 0, 23 700px 50%, 24 800px 0, 25 90% 100%, 26 50% 60%, 27 10% 100%); 28 } 29 #circle { 30 clip-path: circle(25% at 30% 40%); 31 } 32 #circle-without-position { 33 clip-path: circle(25%); 34 } 35 #ellipse { 36 clip-path: ellipse(40% 30% at 25% 30%) content-box; 37 padding: 20px; 38 } 39 #ellipse-padding-box { 40 clip-path: ellipse(40% 30% at 25% 30%) padding-box; 41 padding: 20px; 42 } 43 #inset { 44 clip-path: inset(200px 100px 30% 15%); 45 } 46 .svg { 47 width: 800px; 48 height: 800px; 49 } 50 #rect { 51 clip-path: polygon(0 0, 52 100px 50%, 53 200px 0, 54 300px 50%, 55 400px 0, 56 500px 50%, 57 600px 0, 58 700px 50%, 59 800px 0, 60 90% 100%, 61 50% 60%, 62 10% 100%); 63 stroke: red; 64 stroke-width: 20px; 65 fill: blue; 66 } 67 #polygon-transform { 68 width: 600px; 69 height: 600px; 70 clip-path: polygon(0 0, 71 100px 50%, 72 200px 0, 73 300px 50%, 74 400px 0, 75 500px 50%, 76 600px 0, 77 700px 50%, 78 800px 0, 79 90% 100%, 80 50% 60%, 81 10% 100%); 82 } 83 </style> 84 <div class="wrapper" id="polygon"></div> 85 <div class="wrapper" id="circle"></div> 86 <div class="wrapper" id="circle-without-position"></div> 87 <div class="wrapper" id="ellipse"></div> 88 <div class="wrapper" id="ellipse-padding-box"></div> 89 <div class="wrapper" id="inset"></div> 90 <div class="wrapper" id="polygon-transform"></div> 91 <svg class="svg"> 92 <rect id="rect" x="10" y="10" width="700" height="700"></rect> 93 </svg>