javascript - 如何使用 css 和 html 创建这个形状？

Question

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

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

谢谢！

标签： javascripthtmlcsswebfrontend

Answer 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;
}

<label><input type="checkbox"></label>