Как срезать угол у блока?

Question

Я видела много советов о том как срезать угол блока, но они мне не подходят. Мне нужно не просто срезать угол блока но при этом чтоб рамка и свечение остались. Блок должен выглядеть так:

Это модальное окно.Не могу понять как оставить свечение и рамку.

Answer 1

.block {
  width: 400px;
  height: 400px;
  background: #000000;
  border: 2px solid red;
  border-radius: 0 0 20px 0;
}

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

Answer 2

Как вариант:

* {
  box-sizing: border-box;
}

.block1 {
  width: 140px;
  height: 100px;
  background: blueviolet;
  display: flex;
  align-items: center;
  justify-content: center;
}

.block2 {
  width: 120px;
  height: 80px;
  background:linear-gradient(-45deg, transparent 15px, yellow 0);
  display: flex;
  align-items: center;
  justify-content: center;
}
.block3 {
  width: 118px;
  height: 78px;
  background:linear-gradient(-45deg, transparent 15px, green 0);
}

    <div class="block1">
      <div class="block2">
        <div class="block3"></div>
      </div>
    </div>

Answer 3

Вариант с тенью, но проверьте filter: drop-shadow на поддержку

* {
  box-sizing: border-box;
}

.block1 {
  width: 200px;
  height: 170px;
  background: blueviolet;
  display: flex;
  align-items: center;
  justify-content: center;
}
.block2 {
  width: 150px;
  height: 130px;
  background:linear-gradient(-45deg, transparent 30px, green 0);
  filter: drop-shadow(0px 0px 10px #ffffff);
}

  <div class="block1">
    <div class="block2"></div>
  </div>

БЛОГ НА HUSL

Как срезать угол у блока?

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