Question

所以，我知道如何使用：after和borders来制作倾斜的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

简而言之，您无法使用PGBD_DecisionTable.model修剪元素的内容。

HTML border是元素边缘上的涂漆表面，在形状方面非常有限。您可以使用边框做的唯一巧妙的技巧是使用图像并让中间部分自动重复。
而且，当然，您可以使用border对边界进行修整。

但是，如果要使用非矩形，则需要使用HTML元素或伪元素。

但是，可以使用clip-path修剪元素内容：

border-radius

.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;
}

要做注释浏览器支持目前位于at 88%。如果需要更多，最好在您选择的图像编辑器中剪切文本并将结果另存为<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>。

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

Answer 2

您可以考虑如下的偏斜变换技巧：

.row {
  height: 200px;
  overflow:hidden;
}
.row>div {
  transform-origin:top left;
  transform:skewY(10deg);
  overflow:hidden;
  height:100%;
}
body {
  background: orange;
  margin: 0;
}

.row>div::after {
  content: "";
  position: absolute;
  background: url("https://www.google.com/photos/about/static/images/google.svg") center/cover no-repeat;
  right: 0;
  bottom:0;
  left:0;
  top:0;
  transform:skewY(-10deg);
  transform-origin:top left;
}

<div class='row'>
  <div></div>
</div>

倾斜的div边框透明度

2 个答案: