Mare Mare - 10 months ago 68
HTML Question

Html transform property

How to set text and background on this div straight? The transform property is making it curved.

#paralelogram {
margin-left: 190px;
width: 200px;
height: 80px;
transform: skew(-30deg);
background-image: url('');
position: relative;
overflow: hidden;
#cena {
font-size: 20px;
font-family: monospace;
font-weight: bold;
text-align: center;
vertical-align: middle;
position: absolute;
margin-left: 35px;
margin-top: 25px;

<div class="col-xs-12 volks">
<div id="paralelogram">
<p id="cena">136,380 Kn</p>

Answer Source

An alternative idea is to use clip-path to mask out the parallelogram shape rather than transform:skew. One current caveat is limited browser compatibility.

My example is based on Harry's answer to "Shape with a slanted side (responsive)":

#parallelogram {
  position: relative;
  width: 240px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  color: red;
  background-color: grey;
  background-image: url(;
  -webkit-clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%);
  clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%);
<div id="parallelogram">136,380 Kn</div>