center elements within a polygon div container
center elements within a polygon div container 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. 1 Answer 1 Use gradient to create the shape as background and you sim...
