How to make this shape in html? - html

Question

How to make this shape in html?
In need to code it in table and put text labels inside.

Answer 1

use transform in your css.
following code will help you.
<div id="parallelogram"></div>
<style>
#parallelogram {
width: 200px;
height: 20px;
-webkit-transform: skew(149deg);
-moz-transform: skew(149deg);
-o-transform: skew(149deg);
background: #005999;
}
</style>

Answer 2

background gradients works too, then no need to deal with transform as well for content.
/* 2 gradients side by side */
p, div {
color:lightgray;
padding:0.25em 2em;
background:
linear-gradient(135deg,transparent 1.5em, #00367C 1.25em, #00367C 55%, transparent 55%),
linear-gradient(-45deg,transparent 1.5em, #00367C 1.25em, #00367C 55%, transparent 55%);
}
/* or a single gradient sized with calc() */
div {
background:
linear-gradient(135deg,
transparent 1.5em,
#a0367C 1.25em,
#a0367C calc(100% - 1.5em) ,
transparent calc(100% - 1.5em)
)
;
}
label {
color:white;
}
<p><label>label</label> or some text or <input value="input" />or whatever on a single line</p>
<div><label>label</label> or some text or <input value="input" />or whatever on a single line</div>