如何在html中製作此形狀？

Question

如何使這個形狀在HTML？ 需要在表格中編碼並在裏面放置文本標籤。

Answer 1

使用變換你的CSS。
以下代碼將幫助您。

<div id="parallelogram"></div> 
 
<style> 
 
    #parallelogram { 
 
\t width: 200px; 
 
\t height: 20px; 
 
\t -webkit-transform: skew(149deg); 
 
\t -moz-transform: skew(149deg); 
 
\t  -o-transform: skew(149deg); 
 
\t 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>