csswg-drafts/css-shapes/examples/float-margin-example.html at 1e1a4e871c4c3b388a67a0158dd963283a1ca723 · w3c/csswg-drafts · 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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>shapes with margins example</title>
  <!-- lots of hacks to get this to work with the old shape positioning -->
  <style>
    body {
      width: 300px;
    }
    .shape {
      float: left;
      width: 100px;
      height: 120px;
      background-color: lightblue;
      -webkit-shape-outside: polygon(1px 0px, 1px 70px, 50px 120px, 0px 120px);
      -webkit-clip-path: polygon(0px 0px, 0px 70px, 50px 120px, 0px 120px);
    }
    p {
      margin: 0;
    }
    .content-area {
      position: absolute;
      top: 28px;
      width: 100px;
      height: 100px;
      background-color: #B29BA3;
      z-index: -1;
    }
    .margin-area {
      position: absolute;
      width: 100px;
      height: 20px;
      background-color: #FFF7A5;
      z-index: -1;
    }
  </style>
</head>
<body lang="en">
  <div class="margin-area"></div>
  <div class="content-area"></div>
  <div class="shape"></div>
  <p>Inline content can flow through the margins of a float with shape-outside. If the shape-outside does not fill the content box, inline content will flow through those areas as well. Line lengths are only constrained by the portion of the shape that fits in the margin box.</p>
</body>
</html>