Скошенные углы у блока

Question

Как я могу сделать такие два треугольника через before, after? Не получается сделать такие треугольники. https://prnt.sc/ra00wk

Answer 1

Держите и пользуйтесь на здоровье.

Только, пожалуйста, в следующий раз, когда будете задавать свой вопрос, приводите начальный код, покажите, как вы пытались самостоятельно решить поставленную задачу. Или в крайнем случае добавляйте картинку в свой вопрос вместо ссылок. Спасибо за понимание. Успехов!

* {
  margin: 0;
  padding: 0;
}

body {
  height: 200vh;
}

div {
  position: relative;
  width: 100%;
  height: 100vh;
  background: rgba(109, 119, 65, 1);
  background: linear-gradient(90deg, rgba(53, 54, 49, 1) 50%, rgba(109, 119, 65, 1) 50%);
  clip-path: polygon(0 0, 100% 0%, 100% 0%, 50% 0%, 0% 0%);
  transform: translateZ(0);
  animation: fon 2s forwards;
}

div:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 65%;
  height: 100%;
  background: url("https://avatars.mds.yandex.net/get-pdb/69339/ff631ba0-fe92-4325-8e24-4d808fb23a37/s1200") no-repeat center right;
  background-size: 100%;
}

@keyframes fon {
  100% {
    clip-path: polygon(0 0, 100% 0%, 100% 90%, 50% 100%, 0% 90%);
  }
}

<div></div>

БЛОГ НА HUSL

Скошенные углы у блока

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