如何绘制 html css 梯形等形状

Question

我想使用 html、css 绘制此形状，并将该数据放入该形状中，例如该框的名称和颜色，如图所示。我想要像这样添加多少种颜色。我使用的是梯形，但无法为此添加黑色边框。

Answer 1

我刚刚用谷歌搜索并找到了 SVG 的编辑器 (https://editor.method.ac/)。它为您在那里绘制的任何内容提供 SVG 副本（在菜单视图 -> 源代码中）。

<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg">

 <g>
  <title>Layer 1</title>
  <rect stroke-width="6" rx="8" stroke="#666666" id="svg_2" height="93" width="189" y="281" x="209.99998" fill="none"/>
  <text xml:space="preserve" text-anchor="start" font-family="Noto Sans JP" font-size="19" stroke-width="0" id="svg_3" y="357" x="231" stroke="#000" fill="#000000">(02)</text>
  <line stroke="#666666" id="svg_5" y2="229" x2="364" y1="230" x1="243" stroke-width="6" fill="none"/>
  <line id="svg_6" y2="228" x2="246" y1="283" x1="214" stroke-width="6" stroke="#666666" fill="none"/>
  <line id="svg_7" y2="228" x2="245" y1="283" x1="213" stroke-width="6" stroke="#666666" fill="none"/>
  <line id="svg_8" y2="228" x2="362" y1="282" x1="396" stroke-width="6" stroke="#666666" fill="none"/>
  <text xml:space="preserve" text-anchor="start" font-family="Noto Sans JP" font-size="19" stroke-width="0" id="svg_9" y="356" x="285" stroke="#000" fill="#000000">(16)</text>
  <text xml:space="preserve" text-anchor="start" font-family="Noto Sans JP" font-size="19" stroke-width="0" id="svg_10" y="357" x="337" stroke="#000" fill="#000000">(00)</text>
  <ellipse stroke="#999999" ry="10" rx="10" id="svg_11" cy="315" cx="247.5" stroke-width="0" fill="#666666"/>
  <ellipse stroke="#999999" ry="10" rx="10" id="svg_12" cy="315" cx="302.5" stroke-width="0" fill="#ff0000"/>
  <ellipse stroke="#999999" ry="10" rx="10" id="svg_13" cy="315" cx="354.5" stroke-width="0" fill="#00a516"/>
 </g>
</svg>

以上是下图的SVG。因此，您可以根据需要编辑 text 元素。它们可以是您设备组件的道具。

Answer 2

<div class="content">
<div class="top"></div>
<div class="bottom">
<div>
  <i class="red"></i>
  <span>(23)</span>
</div>
<div>
  <i class="yellow"></i>
  <span>(23)</span>
</div>
<div>
  <i class="green"></i>
  <span>(23)</span>
</div>
</div>
</div>


.top {
    clip-path: polygon(15% 0, 84% 0, 100% 100%, 0% 100%);
    width: 200px;
    height: 100px;
    background-color: #5e5e5e;
    position: relative;
}

.top:before {
    content: '';
    clip-path: polygon(15% 0, 84% 0, 100% 100%, 0% 100%);
    width: 90%;
    height: 90%;
    background-color: #dddddd;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.bottom {
    clip-path: inset(0 0 0 0);
    background-color: #dddddd;
    border: solid 6px #5e5e5e;
    border-radius: 0 0 5px 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
}

.bottom div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.bottom i {
    width: 15px;
    height: 15px;
    border-radius: 100%;
    display: flex;
}

.bottom i.yellow {
    background-color: yellow;
}

.bottom i.green {
    background-color: green;
}

.bottom i.red {
    background-color: red;
}

.content {
    width: 100%;
    height: 100%;
    background-color: #ddd;
    display: grid;
    place-content: center;
}

enter image description here

如何绘制 html css 梯形等形状

How to Draw html css Shapes like Trapezoids

html

css

frontend