如何在html中创建这个形状？

Question

如何在html中创建此形状？ 需要在表格中对其进行编码并将文本标签放入其中。

Answer 1

在你的CSS中使用transform  以下代码将帮助您。

<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

背景渐变也有效，因此无需为内容处理变换。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;