center elements within a polygon div container

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.

Temani Afif · Accepted Answer · 2018-07-01T10:51:12.337

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>

awesome! would you mind explaining me the gradient parameters? So this one goes from bottom left to top right. How can I create a second one going from top left to bottom right? — Question3r, Jul 01 '18 at 10:21
@Question3r I added more details ;) ... the idea is to have 2 gradient one on the top with a triangle shape and the one on the bottom with anothe triangle shape .. both combined will create the whole shape. So you simply need to change both triangle (by changing colors or direction) ... to practice, simply change the color (transparent and/or red) so you can better see both of them and you understand better the parameters — Temani Afif, Jul 01 '18 at 10:25

center elements within a polygon div container

1 Answers1