clip-path <geometry-box>值对比实例页面

展示

代码

• HTML：

  <h4>margin-box</h4>
  <img src="1.jpg" class="clip-path margin-box">
  <h4>border-box</h4>
  <img src="1.jpg" class="clip-path border-box">
  <h4>padding-box</h4>
  <img src="1.jpg" class="clip-path padding-box">
  <h4>content-box</h4>
  <img src="1.jpg" class="clip-path content-box">

• CSS：

  .clip-path {
      width: 200px; height: 150px;
      padding: 20px;
      border: 20px solid deepskyblue;
      background-color: deeppink;
      margin: 20px;
  
      --basic-shape: polygon(0% 0%, 100% 0%, 50% 100%);
      -webkit-clip-path: var(--geometry-box, border-box) var(--basic-shape);
      clip-path: var(--geometry-box, border-box) var(--basic-shape);
  }
  .margin-box {
      --geometry-box: margin-box;
  }
  .border-box {
      --geometry-box: border-box;
  }
  .padding-box {
      --geometry-box: padding-box;
  }
  .content-box {
      --geometry-box: content-box;
  }