csswg-drafts/css-shapes/examples/float-margin-example.html at 88fe5bed249f242ba2c199bcc76ba11a38feff44 · CodeRedDigital/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>