центральные элементы внутри контейнера многоугольника

Question

В настоящее время у меня есть контейнер div с текстом.

div {
  height: 200px;
  background: red;
}

p {
  text-align: center;
}

<div>
  <p>
    Text goes here
  </p>
</div>

и я хочу, чтобы этот контейнер div был параллелограммом с вертикально центрированным текстом в нем.

div {
  height: 200px;
  background: red;
  clip-path: polygon(0 25%, 100% 0, 100% 25%, 0 50%);
}

p {
  text-align: center;
}

<div>
  <p>
    Text goes here
  </p>
</div>

как вы можете видеть здесь, текст полностью исчезает, потому что css работает только для контейнера div.

Как сделать так, чтобы текст отображался в вертикальном центре этого параллелограмма?

Edit:

Не знаю, пользуюсь

clip-path: polygon(0 25%, 100% 0, 100% 25%, 0 50%);

- лучший способ создать наклонный контейнер div.

Answer 1

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

div.container {
  height: 120px;
  line-height:120px;
  background-image:
   /*Top triangle*/ 
   linear-gradient(to bottom right,transparent 49%,red 51%),
   /*Bottom triangle*/
   linear-gradient(to top left,transparent 49%,red 51%);
  
  background-position:top, bottom; /* One on the top and the other on the bottom*/
  background-size:100% 50%; /*both will be 100% width and 50% height*/
  background-repeat:no-repeat; /*don't repeat*/
  
  
}

p {
  text-align: center;
}

<div class="container">
  <p>
    Text goes here
  </p>
</div>

И если вы хотите положиться на clip-path, лучше используйте эти значения, чтобы охватить весь div, и вам просто нужно отрегулировать высоту div для управления высотой фигуры:

div.container {
  height: 120px;
  line-height:120px;
  background:red;
  -webkit-clip-path: polygon(0 50%, 100% 0%, 100% 50%, 0% 100%);
  clip-path: polygon(0 50%, 100% 0%, 100% 50%, 0% 100%);
}

p {
  text-align: center;
}

<div class="container">
  <p>
    Text goes here
  </p>
</div>