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.