如何绘制像梯形这样的html css形状答案

【问题标题】：How to Draw html css Shapes like Trapezoids如何绘制像梯形这样的html css形状
【发布时间】：2021-10-09 16:34:01
【问题描述】：

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

【问题讨论】：

嗨！我是一个非常糟糕的“css抽屉”，但我知道我可以提高我的“知识”！请向我们提供您的尝试，从它开始:)
这是我试过的w3schools.com/howto/…
@rohit，你试过svg吗？
@AmilaSenadheera 我有这个的 svg 图像。但我不知道如何将该信息放入该 svg 中。所以我试图将其转换为 html css div。这将很容易添加此文本 DP 和加号图标。将下面的 div 和动态信息着色为 02,16。

【解决方案1】：

我刚刚搜索了一下，找到了SVG 的编辑器 (https://editor.method.ac/)。它为您在此处绘制的任何内容提供了 SVG 对应项（在菜单 View -> Source 中）。

<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 元素。它们可以是您设备组件的道具。

【讨论】：

@rohit，看看这个！！

【解决方案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

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。