CODEWITHSUNDEEP
htmlshapes
Pat
Pat

Reputation: 727

How to make this shape in html?

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

enter image description here

Upvotes: 1

Views: 91

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 106058

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>

Upvotes: 0

Farhad Rakib
Farhad Rakib

Reputation: 162

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>

Upvotes: 2

Related Questions