CSS сложенный угол эффект прозрачный фон

Ответ 1

Единственный способ достижения прозрачности (или подражания) с использованием текущего подхода состоит в том, чтобы установить border-color так же, как на странице background-color. Это связано с тем, что код использует трюк границы для создания сложенного эффекта. Однако этот подход не очень полезен, когда фон страницы представляет собой изображение или сам градиент (в основном, не сплошной цвет).

В таких сценариях этот эффект может быть создан с использованием комбинации фона linear-gradient, как в приведенном ниже фрагменте. Здесь используется комбинация из трех linear-gradient, и они следующие:

• Один линейный градиент (под углом внизу слева) для создания сложенного эффекта. Этот градиент имеет фиксированный размер 16 пикселей на 16 пикселей. ( Примечание: Мы можем перенести этот линейный градиент на псевдоэлемент, как в версии box-shadow в нижней части этого ответа, но сохранение его в родительском элементе оставляет один псевдоэлемент для некоторого другого использования. )
• Один линейный градиент для обеспечения сплошного цвета слева от треугольника, который вызывает сложенный эффект. Мы используем градиент, даже если он создает сплошной цвет, потому что мы можем контролировать размер фона только при использовании изображений или градиентов. Этот градиент позиционируется на -16px по оси X (в основном это означает, что он заканчивается до того места, где присутствует сложенный треугольник).
• Другой градиент, аналогичный приведенному выше, который снова создает сплошной цвет, но расположен на 16 пикселей вниз по оси Y (опять же, чтобы опустить область, занятую сложенным треугольником).

Это очень сложно, но он может быть отзывчивым, может поддерживать несколько цветов и не сплошные фоны. Чтобы использовать разные цвета для контейнера или сложенной области, просто измените цвета градиента. Первый формирует сложенную область, а остальная форма - цвет контейнера.

body {
  background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%);
}
.note {
  position: relative;
  width: 320px;
  padding: 1em 1.5em;
  margin: 2em auto;
  color: #fff;
  background: linear-gradient(to bottom left, transparent 50%, #658E15 50%), linear-gradient(to right, #97C02F 99.9%, transparent 99.9%), linear-gradient(to right, #97C02F 99.9%, transparent 99.9%);
  background-size: 16px 16px, 100% 100%, 100% 100%;
  background-position: 100% 0%, -16px 0%, 100% 16px;
  background-repeat: no-repeat;
  overflow: hidden;
}
/* Just for demo */

.note {
  transition: all 1s;
}
.note:hover {
  width: 480px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="note">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel sem magna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nunc posuere dolor eu mauris feugiat dignissim.</p>
</div>

Ответ 2

Css span

Используя элемент span (.fold), я создаю дополнительную границу справа от div.
Затем я добавил псевдоклассы в .fold, чтобы на угловом элементе было более темное размытие.

body {
  margin: 20px;
}
.fold {
  position: absolute;
  top: 15px;
  right: -15px;
  width: 15px;
  height: calc(100% - 15px);
  background-color: inherit;
}
.fold::before {
  content: "";
  position: absolute;
  top: -15px;
  border-top: 15px solid transparent;
  border-left: 15px solid firebrick;
}
.fold::after {
  content: "";
  position: absolute;
  top: -15px;
  border-top: 15px solid transparent;
  border-left: 15px solid black;
  opacity: 0.5;
}
.note {
  background-color: firebrick;
  padding: 25px;
  position: relative;
  width: 400px;
}

<div class="note">
  <span class="fold"></span>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia lorem vel purus scelerisque tincidunt. Nulla semper magna eget mauris semper, vel viverra urna lacinia. Maecenas feugiat molestie ante a faucibus. Donec mollis pulvinar nisi, pretium
  ullamcorper dui molestie lacinia. Quisque arcu massa, sollicitudin nec magna quis, tempus pulvinar est. Integer non consectetur quam. Sed nulla quam, luctus ut elit sit amet, sagittis condimentum nisi. In quis ipsum tellus. Proin in imperdiet felis.
  Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer venenatis, nunc non congue pellentesque, diam enim consectetur libero, vitae fermentum lectus risus vitae ligula. Donec tristique sollicitudin mi quis condimentum.
  In eget diam viverra, elementum nisi vitae, euismod elit. Nulla facilisi. Nullam et odio efficitur, rutrum orci sit amet, convallis ante. Nulla metus lorem, euismod non ante mollis, facilisis egestas arcu. Sed arcu tortor, lacinia a nibh sed, laoreet
  iaculis arcu. Quisque vel lacus ut felis ornare molestie a eget purus. Cras est elit, euismod sit amet magna ut, cursus auctor erat. Proin eu ante lorem.
</div>