Наклонная прозрачность границы раздела

Question

Итак, я знаю, как создавать наклонные элементы div, используя: after и border для современных макетов.

Но мне интересно, если вы можете использовать это, чтобы вырезать часть 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

Вы можете рассмотреть трюк с перекосом, как показано ниже:

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

Answer 2

Короче говоря, вы не можете обрезать содержимое элемента, используя 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>

Do note Поддержка браузера в настоящее время находится на уровне при 88% .Если вы хотите большего, лучше вырезать текст в выбранном вами графическом редакторе и сохранить результат как <svg>.

Для получения дополнительной информации об отсечении и маскировке я рекомендую следующие статьи:

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