Как сделать фон треугольником?

Question

Как можно сделать фон треугольником?

body, html { margin: 0; padding: 0; height: 100vh; }

div {
	width: 100%;
	height: 100vh;
	background: url("https://www.preghiere.net/wp-content/uploads/2015/11/parigi1.jpg") bottom center;
  background-size: cover;
}

<div></div>

Answer 1

А вот так. Смотрите:

body,
html {
  margin: 0;
  padding: 0;
  height: 100vh;
}

div {
  width: 100%;
  height: 100vh;
  background: url("https://www.preghiere.net/wp-content/uploads/2015/11/parigi1.jpg") no-repeat center center;
  background-size: cover;
  clip-path: polygon(50% 100%, 50% 100%, 50% 100%);
  transform: translateZ(0);
  animation: fon 3s forwards;
}

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

<div></div>

БЛОГ НА HUSL

Как сделать фон треугольником?

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