Как сделать такие углы у картинки?

Question

Подскажите, как можно сделать такие углы как на левой стороне скрине? Это накладываются друг на друга треугольники ? или это делается с помощью псевдоэлемента? Что-то у меня не получается никак... Спасибо.

<article class="productSaleBonusBlock">
   <a class="productSaleBonus" href="#">
     <img class="ourProductionSecondPageBonusImage" src="img/second-Page-Image/bonus.jpg">
   </a>
</article>

Answer 1

Простой и редактируемый вариант через псевдоэлементы. Более сложный и сложно редактируемый - через path.

Пример через псевдоэлементы:

.productSaleBonusBlock {
  background: #f54c5f;
  border-radius: 10px;
  width: 300px;
  height: 300px;
  position: relative;
  margin: 0 40px 0;
}

.productSaleBonusBlock:before {
  position: absolute;
  top: 0;
  left: -25px;
  width: 100px;
  height: 100%;
  background: #f54c5f;
  z-index: -1;
  transform: skew(-7deg);
  content: '';
  border-radius: 10px;
}

.productSaleBonusBlock:after {
  position: absolute;
  top: 0;
  left: -25px;
  width: 50px;
  height: 100%;
  background: #c4273a;
  z-index: -2;
  transform: skew(7deg);
  content: '';
  border-radius: 10px;
}

.productSaleBonus {
  overflow: hidden;
}

.ourProductionSecondPageBonusImage {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

<article class="productSaleBonusBlock">
  <a class="productSaleBonus" href="#">
    <img class="ourProductionSecondPageBonusImage" src="https://photo-cdn2.icons8.com/2zGLWSODzaWzRcTefaDsk11oI86Q9buibsOETWMYCUc/rs:fit:288:457/czM6Ly9pY29uczgu/bW9vc2UtcHJvZC5h/c3NldHMvYXNzZXRz/L2VkaXRvci9tb2Rl/bC84MjQvNjUzOTI0/MjctNzMyMy00NTk2/LTgzNmEtZDM4MmQz/ZGYxMDYyLnBuZw.png">
  </a>
</article>

БЛОГ НА HUSL

Как сделать такие углы у картинки?

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