如何使用 css 和 html 创建这个形状？ [关闭]答案

【问题标题】：How to create this shape using css and html? [closed]如何使用 css 和 html 创建这个形状？ [关闭]
【发布时间】：2021-03-10 12:41:46
【问题描述】：

你好！我的团队受雇构建一个可以为牙医管理诊所记录的 Web 应用程序，我负责前端，我如何使用 Web 技术（CSS、HTML、js）构建图像上显示的形状?

我没有找到任何为此目的而构建的库。

谢谢！

【问题讨论】：

为什么不使用实际图像？否则就是 4 个三角形，上面有 1 个方块
SVG 在这里会很完美。使用 CSS 网格也会有所帮助。
“我的团队被录用了”，“我负责前端”，以及暗示的“我什至不知道从哪里开始”都不太顺利。如果您的尝试遇到特定问题，我敢打赌人们会帮助您。

标签： javascript html css web frontend

【解决方案1】：

如果是选择牙齿，那么标签输入和背景就可以了。

基本思路：

* {
  box-sizing: border-box;
}

label {
  display: inline-block;
  padding: 3px;
  border: solid 1px;
  background: linear-gradient(to bottom left, transparent 0 calc(50% - 1px), black, transparent calc(50% + 1px)) no-repeat, linear-gradient(to bottom right, transparent 0 calc(50% - 1px), black, transparent calc(50% + 1px)) no-repeat;
}

label input {
  display: block;
}

&lt;label&gt;&lt;input type="checkbox"&gt;&lt;/label&gt;

【讨论】：