倾斜的 div 边框透明度答案

【问题标题】：Slanted div border transparency倾斜的 div 边框透明度
【发布时间】：2018-12-31 01:11:00
【问题描述】：

所以，我知道如何使用 :after 和边框为现代布局制作倾斜的 div。

但是，我想知道您是否可以使用它通过透明度裁剪 div 的一部分？例如，假设我有一排带有背景图像的卡片，我想要对这些卡片进行倾斜效果。但是，这里的倾斜只是一个透明层，页面（不是卡片的背景图像）会渗入其中。

使用border-color: (color) transparent transparent 将不起作用。任何一个倾斜的方向也不会反过来。不知道该怎么做，或者是否有可能。

.row > div {
  background: url("https://www.google.com/photos/about/static/images/google.svg");
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  height: 200px;
  }

body{ background: orange;}
    
  .row > div:first-child::after {
  content: "";
    position: absolute;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    top: 0;
    border-width: 90px 0 0 100vw;
    border-color: black transparent transparent;
  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='row'>
  <div></div>
</div>

【问题讨论】：

网络是虚拟空间。 任何事情都是可能的。但是如果没有minimal reproducible example，您的问题就很不清楚。
这并不完全令人困惑，但绝对没有你想象的那么清楚。您正在谈论行和列，就好像我们应该很清楚您的意思一样，但是在 Web 布局中大约有 15 种不同的方式来制作行和列。如果您可以提供 Andrei 要求的示例，我们可以为您提供帮助。使用 Stack Overflow 的 sn-p 功能（这很酷），它是里面带有“”的按钮。它允许您编辑 HTML、JS 和 CSS，然后我们可以查看您为实现目标所做的努力。
@MatthewLudwig 见 sn-p。因此，不是黑条“倾斜”，而是透明度“切割”了 div 中的内容。行和列在这里无关紧要。基本上，我所追求的就是如何使正文内容通过透明覆盖层渗出。
所以你想在你的元素中绘制一个整体，无论它可能包含什么，并且这个整体应该是透明的？看穿了吗？
是的。没错。

标签： javascript jquery html css

【解决方案1】：

简而言之，您不能使用border 修剪元素的内容。

HTML border 是元素边缘的涂漆表面，它的形状非常有限。您可以对边框做的唯一巧妙技巧是使用图像并让中间部分自动重复。
当然，您还可以使用border-radius 使边框变圆。

但如果你想要一个非矩形，你需要使用 HTML 元素或伪元素。

然而，一个可以修剪元素内容，使用clip-path：

.row>div {
  background: url(https://www.google.com/photos/about/static/images/google.svg) no-repeat 50% 50% /cover;
  padding-bottom: 33%;
  clip-path: polygon(0 0, 100% 42%, 100% 100%, 0 100%);
}

body {
  background: url(https://picsum.photos/800/600) no-repeat 50% 50% /cover;
  height: 100vh;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container-fluid">
  <div class='row'>
    <div></div>
  </div>
</div>

做请注意浏览器支持目前处于at 88%。如果您想要更多，最好在您选择的图像编辑器中剪切文本并将结果保存为<svg>。

有关剪辑和遮罩的更多信息，我推荐以下文章：

【讨论】：