Home | History | Annotate | Download | only in resources 
      1 html, body {
      2     padding: 0;
      3     margin: 0;
      4     text-align: justify;
      5     font-family: Palatino, Georgia, serif;
      6     font-size: 10px;
      7     -webkit-hyphens: auto;
      8     text-align: justify;
      9     line-height: 1.2em;
     10 }
     11 
     12 .shape {
     13     width: 100px;
     14     height: 100px;
     15 }
     16 
     17 #circleShape {
     18     float: left;
     19     shape-outside: circle(closest-side at center);
     20     margin: 2px;
     21     -webkit-clip-path: circle(closest-side at center);
     22     background-color: green;
     23 }
     24 
     25 #imageShape {
     26     float: left;
     27     background: url("shape.gif") no-repeat;
     28     shape-outside: url("shape.gif");
     29     shape-margin: 2px;
     30     width: 200px;
     31     height: 200px;
     32 }
     33 
     34 #insetShape {
     35     float: right;
     36     shape-outside: inset(5px);
     37     -webkit-clip-path: inset(5px);
     38     shape-margin: 4px;
     39     background-color: red;
     40     border: 1px solid black;
     41 }
     42 
     43 #roundedInsetShape {
     44     float: right;
     45     shape-outside: inset(5px round 64px 32px 16px 36px);
     46     -webkit-clip-path: inset(5px round 64px 32px 16px 36px);
     47     shape-margin: 4px;
     48     background-color: lightblue;
     49     opacity: 0.4;
     50     border: 1px solid black;
     51 }
     52 
     53 #triangleLeft {
     54     float: left;
     55     shape-outside: polygon(0 0, 100% 50%, 0 100%);
     56     -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
     57     shape-margin: 4px;
     58     background-color: yellow;
     59     opacity: 0.4;
     60 }
     61 
     62 #triangleRight {
     63     float: right;
     64     shape-outside: polygon(100% 0, 0 50%, 100% 100%);
     65     -webkit-clip-path: polygon(100% 0, 0 50%, 100% 100%);
     66     shape-margin: 4px;
     67     background-color: orange;
     68 }
     69 
     70 #selfIntersectingStar {
     71     float: left;
     72     shape-outside: polygon(50% 0, 100% 100%, 0 34%, 100% 34%, 0 100%);
     73     -webkit-clip-path: polygon(50% 0, 100% 100%, 0 34%, 100% 34%, 0 100%);
     74     shape-margin: 4px;
     75     background-color: blue;
     76     width: 100px;
     77     height: 200px;
     78 }
     79 
     80 #region1 { width: 40%; }
     81 #region2 { width: 22%; }
     82 #region3 { width: 22%; }
     83