如何在 html 中制作这个形状？

Question

如何在html中制作这个形状？需要在 table 中编码并将文本标签放入其中。

Answer 1

在您的 css 中使用变换。
以下代码将为您提供帮助。

<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

背景渐变也可以，那么就不需要处理内容的变换了。

/* 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>

如何在 html 中制作这个形状？

How to make this shape in html?

html

shape