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 simply need to center the text using any common way. You will have better support than clip-path.

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:

clip-path

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>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.