Как сделать так, чтобы низ моего дивана имел форму пика?

Question

Я пытаюсь сделать так, чтобы мой div имел такую ​​форму:

Я получаю этот результат только с кодом, который использую:

div {
  background: lightblue;
  height: 34rem;
  -webkit-clip-path: polygon(0 0, 100% 0%, 100% 70%, 0% 100%);
  clip-path: polygon(0 0, 100% 0%, 100% 70%, 0% 100%);
}

<div></div>

Спасибо за помощь, ребята!

Answer 1

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

div.box {
  height: 300px;
  background:
    linear-gradient(blue,blue) top/100% 70%,
    linear-gradient(to bottom right,blue 49.8%,transparent 50%) bottom right/50% 30%,
    linear-gradient(to bottom left, blue 49.8%,transparent 50%) bottom left/50.2% 30%;
  background-repeat:no-repeat;
  margin-bottom:20px;
}

<div class="box">
</div>

Если вам нужна черная рамка, вы можете отрегулировать ее следующим образом:

div.box {
  height: 300px;
  background:
    linear-gradient(blue,blue) top/100% 70%,
    linear-gradient(to bottom right,blue calc(50% - 5px),#000 calc(50% - 5px),#000 49.8%,transparent 50%) bottom right -20px/calc(50% + 20px) 30%,
    linear-gradient(to bottom left, blue calc(50% - 5px),#000 calc(50% - 5px),#000 49.8%,transparent 50%) bottom left  -20px/calc(50% + 21px) 30%;
  background-repeat:no-repeat;
  margin-bottom:20px;
}

<div class="box">
</div>

Answer 2

div {
  background: lightblue;
  height: 34rem;
  -webkit-clip-path: polygon(100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);
  clip-path: polygon(100% 0, 100% 75%, 50% 100%, 0% 75%, 0 0);
}

<div></div>

Эта ссылка полезна https://bennettfeely.com/clippy/