如何在切片 div 上添加渐变？ [复制]

Question

基本上，我有这个 CSS 代码，它使用线性渐变从我的 div 的角落切出一个 45 度的块。但是，我想在 div 的顶部应用渐变，透明部分仍然存在。

我想要什么

我有什么

这是我在 CSS 中的代码

.sectionlabel {
  position: absolute;
  width: 100%;
  color: white;
  height: 35px;
  top: -35px;
  border-top-left-radius: 6px;
  background: linear-gradient(225deg, transparent 10px, #676767 0);
}

我不完全确定要添加什么以将渐变叠加到 div 上。 感谢所有帮助！

谢谢，

• GraysonDaMighty

Answer 1

考虑使用clip-path 切割角的边缘。

div {
  height: 35px;
  width: 200px;
  -webkit-clip-path: polygon(0% 100%, 100% 100%, 100% 10px, calc(100% - 10px) 0%, 0% 0%);
  clip-path: polygon(0% 100%, 100% 100%, 100% 10px, calc(100% - 10px) 0%, 0% 0%);
  background-image: linear-gradient(0deg, black, gray 80%); 
}

<div></div>