Question

我一直在想为什么HTML中没有特殊的形状标签或CSS中的样式来制作形状，如三角形，圆形或多边形等。我不明白为什么没有实现这种性质的东西。难道他们没有想到它吗？我真的怀疑，或者他们故意拒绝提供它？。

Answer 1

这主要是因为盒子模型概念要求块级元素是矩形的。这样做的原因是允许关于这些元素如何相互作用的可预测行为，例如，堆叠在彼此之上或彼此相邻浮动。

（旁注：这非常适合早期的互联网，因为网站基于垂直性并且几乎没有视觉定义的容器 - 它是一个接一个的文本块，可能被图片打破。水平堆叠的东西没有'直到后来真的进入它。）

正如@ Cristy在评论中的链接所示，创建更复杂的形状有一些技巧。例如，可以通过创造性地使用border-radius来实现圆圈和椭圆形。其他形状依赖于transform属性的失真。

然而，重要的是要记住，浏览器会认为这样的模拟形状具有边界BOX。这是支撑原则，它将决定一个元素与另一个元素的接近程度，以及它们的边缘如何相遇。

Answer 2

HTML和CSS都不是绘图程序。虽然可以创建这样的对象，但至少在某种程度上它们是错综复杂的黑客。

Answer 3

Html5

     <canvas id="myCanvas" width="200" height="100"
     style="border:1px solid #000000;">
     </canvas>

可用于绘制形状。

Answer 4

HTML 5和CSS3可以实现这一目标，以查看可以创建的所有可能形状，在http://www.land-of-web.com/freebies/css3-simple-shapes-cheat-sheet.html

制作了备忘单

编辑：Utkanos是对的，您可以使用我创建的链接创建形状，但请记住div容器将作为块输出。

Answer 5

这是因为HTML只是为您的文本赋予语义含义。虽然浏览器确实为大多数元素提供了一些默认样式，但这仅仅是一个建议，默认样式可能因浏览器而异。因此，就HTML而言，如果他们试图实现<triangle>标记，那么它绝对会违反所有最佳做法。他们确实有标签在WEB（等等）的开头定义了样式。但它已被证明是一个维持的噩梦。因此，WEB的样式元素被委托给CSS。

就CSS而言，自开始以来它已经走过了漫长的道路。虽然没有简单的方法可以做到这一点，但你提到的大部分内容都可以通过CSS实现。像圆圈这样的东西实际上非常简单。说到三角形，有点困难。但是现在可以通过一些CSS和JavaScript魔术来完成任何事情。有很多Javascript库专门用于绘制/动画制作。

Answer 6

这不是HTML的用途，用于标记文档。他们发明了像SVG这样的东西，以及可扩展的标记语言，如XHTML，你可以用模块化的方式将它们插入。

Answer 7

如前所述，HTML和CSS不包含任何严重的形状功能。没有使用像Javascript和Canvas这样的脚本的最接近的东西是SVG，它实际上只是用XML编写的矢量图形。

有关SVG的更多信息：

CSS或HTML中的形状

7 个答案: