CSS 剪辑路径显示按钮上方但不下方的垂直溢出

Question

我有一个按钮，文本左侧有一个图像，我想遮盖该图像，以便隐藏悬挂在按钮底部的部分，但顶部溢出仍然可见。从我的研究来看，

clip-path

似乎是解决此问题的方法之一，但除了猜测/检查之外，我不知道如何确定

polygon

值，到目前为止，效果还不是很好。要在混合物中添加另一个扳手，我希望图像稍微旋转。

.container {
  display:flex;
  width:100vw;
  height:100vh;
  align-items:center;
  justify-content:center;
}

button {
  width:450px;
  height:100px;
  background:black;
  font-family:sans-serif;
  font-size:30px;
  font-weight:bold;
  color:white;
  border:none;
  outline:none;
  position:relative;
  padding:20px 30px 20px 110px;
}

/* Image masked off below this line */
button:after {
  display:block;
  content:"";
  width:200%;
  height:1px;
  background:red;
  position:absolute;
  bottom:0;
  left:-50%;
}

.image {
  display:block;
  width:80px;
  height:120px;
  position:absolute;
  top:50%;
  left:30px;
  transform:translateY(-50%);
  /* Mask off bottom of image container */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 14% 100%);
}

.image img {
  transform:rotate(-6deg);
}

<div class="container">
  <button>
    <div class="image">
      <img src="https://placehold.co/80x120" />
    </div>
    Lorem ipsum dolor
  </button>
</div>

在上面的示例中，图像中低于红线的部分将不可见，但其上方的所有内容都是可见的。有什么技巧可以生成

clip-path

值吗？

Answer 1

考虑让

.image

容器占据按钮的整个区域，并为图像在按钮区域上方的位置留出额外的顶部空间：

.container {
  display:flex;
  width:100vw;
  height:100vh;
  align-items:center;
  justify-content:center;
}

button {
  width:450px;
  height:100px;
  background:black;
  font-family:sans-serif;
  font-size:30px;
  font-weight:bold;
  color:white;
  border:none;
  outline:none;
  position:relative;
  padding:20px 30px 20px 110px;
}

/* Image masked off below this line */
button:after {
  display:block;
  content:"";
  width:200%;
  height:1px;
  background:red;
  position:absolute;
  bottom:0;
  left:-50%;
}

.image {
  position:absolute;
  inset: -20px 0 0;
  overflow: hidden;
}

.image img {
  width:80px;
  height:120px;
  position:absolute;
  top: calc(50% + 10px);
  left:30px;
  transform:translateY(-50%) rotate(-6deg);
}

<div class="container">
  <button>
    <div class="image">
      <img src="https://placehold.co/80x120" />
    </div>
    Lorem ipsum dolor
  </button>
</div>

我们将

.image

容器的定位样式转移到

<img>

元素，并在

overflow: hidden

容器上使用

.image

来夹住

<img>

的底部。额外的顶部间距可确保图像顶部不会被剪裁。像这样的裁剪意味着我们不必使用三角函数进行任何复杂的计算。

20px

是足以显示图像顶部的任意距离。