Question

我正在尝试将clip-path应用于彼此相邻的三个项目。由于路径是基于未裁剪的div形状计算彼此之间的空间，因此存在不需要的间隙。在下面的代码中，当我在.class2中应用注释样式时，我得到了我想要的结果，但它不再响应。用更合适的方法获得类似结果的任何其他方法？

https://codepen.io/SpoyrazY/pen/erbKXx

HTML

<div class="class1">
    <h1>1</h1>
</div>
<div class="class2">
    <h1>2</h1>
</div>
<div class="class3">
    <h1>3</h1>  
</div>

CSS

.class1{
  background-image:url(https://dummyimage.com/600x400/66ccff/fff&text=+);
  width: 33.33333333%;
  height: 400px;
  float: left;
  -webkit-clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
  text-align: center;
  color: white;
}
.class2{
  background-image:url(https://dummyimage.com/600x400/66ff66/fff&text=+);
  width: 33.33333333%;
  height: 400px;
  float: left;
  -webkit-clip-path: polygon(15% 0, 100% 0%, 85% 100%, 0%, 100%);
  clip-path: polygon(15% 0, 100% 0%, 85% 100%, 0% 100%);
  /*
  margin-left: -90px;
  margin-right: -90px;
  width: 42.7%;
   -webkit-clip-path: polygon(12% 0, 100% 0%, 85% 100%, 0%, 100%);
  clip-path: polygon(12% 0, 100% 0%, 88% 100%, 0% 100%);
  */
  text-align: center;
  color: white;
}
.class3{
  background-image:url(https://dummyimage.com/600x400/ff99ff/fff&text=+);
  width: 33.33333333%;
  height: 400px;
  float: left;
  -webkit-clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
  clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%);
  text-align: center;
  color: white;
}

Answer 1

这是由clip-path引起的。您可以通过在自定义类中设置scale来获得结果。所以你的html将是这样的

<div class="class1 block">
    <h1>1</h1>
</div>
<div class="class2 block">
    <h1>2</h1>
</div>
<div class="class3 block">
    <h1>3</h1>  
</div>

添加一些css

行

.block {
   transform: scale(1.35);
   transform-origin: top;
}

工作小提琴here

Css剪辑路径之间没有间隙

1 个答案: