угол с помощью :after и :before

Question

Помогите сделать угол у картинки с помощью :after и :before

Я пробовал так :

.image {
    width: 430px;
    margin: 0 auto;
    position: relative;
}

.image::after,
.image::before {
    content: "";
    color: yellow;
    position: absolute;
    display: block;
}

 .image::before {
    left: 0px;
    bottom: 0px;
    width: 5px;
    height: 70px;
    color: yellow;
}

 .image::after {
    left: 0px;
    bottom: 0px;
    width: 70px;
    height: 5px;
}

.image img {
    width: 100%;         
}

<div class="image"><img src="images/attestat_big.jpg" alt=""></div>

Answer 1

Вариант с помощью псевдоэлементов :before или :after. Минус этого варианта в том, что его желательно использовать только в том случае, если у вас однотонный основной фон. С помощью границ мы создаем треугольник и задаем границам необходимый цвет. Пример такого варианта:

.image {
  width: 300px;
  height: 200px;
  position: relative;
}

.image:after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  border: 20px solid transparent;
  border-right: 20px solid white;
  border-bottom: 20px solid white;
}

<div class="image"><img src="https://million-wallpapers.com/wallpapers/0/53/small/532828482732588.jpg" alt=""></div>

Вариант с помощью маскирования, используя свойство clip-path. В этом случае уже не имеет значения, какой будет основной фон страницы. Пример такого использования:

.image {
  width: 300px;
  height: 200px;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 80% 100%, 0 100%);
}

<div class="image"><img src="https://million-wallpapers.com/wallpapers/0/53/small/532828482732588.jpg" alt=""></div>

БЛОГ НА HUSL

угол с помощью :after и :before

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