center elements within a polygon div container - html

Question

currently I have a div container with text in it.
div {
height: 200px;
background: red;
}
p {
text-align: center;
}
<div>
<p>
Text goes here
</p>
</div>
and I want this div container being a parallelogram with a vertically centered text in it.
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>
as you can see here, the text completely disappears because the css only works for the div container.
How can I make the text appear in the vertical center of this parallelogram?
Edit:
I don't know if using
clip-path: polygon(0 25%, 100% 0, 100% 25%, 0 50%);
is the best way to create a div container that is skew.

Answer 1

Use gradient to create the shape as background and you simply need to center the text using any common way. You will have better support than 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>
And if you want to rely on clip-path better use these values to cover the whole div and you simply need to adjust the height of div to control the height of shape:
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>