CSS-Course-Code/clip-path-shape.html at main · yoo-baba/CSS-Course-Code · 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
46
47
48
49
50
51
52
53
54
55
<!doctype html>
<html>
  <head>
    <title>Clip-path</title>
    <style>
      #box {
        background: orangered;
        width: 400px;
        height: 400px;
        clip-path: shape(
          from 0% 0%,
          line to 100% 0%,
          line to 100% 80%,
          arc to 50% 80% of 200px,
          curve to 0% 80% with 25% 91%,
          close
        );
        padding: 50px 20px;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <div id="box">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. In obcaecati
      possimus doloremque cum, ad assumenda iste excepturi cumque doloribus est.
    </div>
  </body>
</html>

<!-- clip-path: shape(
          from 0 0,
          hline to 100%,
          vline to 80%,
          line to 50% 100%,
          line to 0% 80%,
          close
        ); -->

<!-- clip-path: shape(
          from 0% 50%,
          curve to 50% 0% with 50% 50%,
          curve to 100% 50% with 75% 0%,
          curve to 50% 100% with 85% 100%,
          line to 0% 100%,
          close
        ); -->

<!-- clip-path: shape(
          from 0% 0%,
          arc to 100% 0% of 600px,
          line to 100% 70%,
          arc to 0% 70% of 600px,
          close
        ); -->