javascript - 倾斜的div边框透明度

Question

所以，我知道如何使用 :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>

Answer 1

简而言之，您不能使用 border trim 元素的内容.

HTML border是元素边缘的绘制(paint)表面，形状非常有限。您可以使用边框做的唯一巧妙的技巧是使用图像并让中间部分自动重复。
而且，当然，您可以使用 border-radius 使边框变圆.

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

但是，可以 trim 元素内容，使用 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> .

有关裁剪和 mask 的更多信息，我推荐这些文章:

• > https://css-tricks.com/clipping-masking-css/
• > https://css-tricks.com/masking-vs-clipping-use/