Как сделать прозрачный блок у которого одна сторона срезана

Question

.block {
  position: relative;
  z-index: 700;
  justify-content: center;
  background-color: #3C0078;
  border-radius: 25px;
  box-sizing: border-box;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.9);
  margin: 20px auto;
  height: 90px;
  max-width: 450px;
}

.block::before {
  content: '';
  position: absolute;
  top: -20%;
  left: 5%;
  width: 70%;
  height: 100%;
  background-color: #7E37FC;
  opacity: 0.5;
  border-radius: 25px;
  transform-origin: top right;
  transform: skewX(30deg);
  z-index: -2;
}

.block::after {
  content: "";
  position: absolute;
  top: -20%;
  right: -15px;
  width: 70%;
  height: 100%;
  background-color: #7E37FC;
  opacity: 0.5;
  border-radius: 25px;
  z-index: -1;
}

<div class="block"></div>

Здесь левый угол срезаный и когда делаю его прозрачным тогда по середине пятно а нужно чтоб было цельное

Answer 1

Вот так это можно реализовать

.block {
  position: relative;
  justify-content: center;
  background-color: #3C0078;
  border-radius: 25px;
  box-sizing: border-box;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.9);
  margin: 20px auto;
  height: 90px;
  max-width: 450px;
}

.block::before {
  content: '';
  position: absolute;
  top: -20%;
  left: 15%;
  width: 90%;
  height: 100%;
  background-color: #7E37FC;
  border-radius: 25px;
  transform: perspective(300px) rotateX(-30deg);
  opacity: 0.5;
}

.left::before {
  transform-origin: 100% 50%;
}

<div class="block left"></div>

БЛОГ НА HUSL

Как сделать прозрачный блок у которого одна сторона срезана

Ответы (1 шт):