CSS或HTML中的形状

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

2013-06-01 James Okpe George

http://css-tricks.com/examples/ShapesOfCSS/ – Cristy

HTML 5和CSS3可以做到这一点，一看就可以创建，作弊表已作出一切可能的形状在http://www.land-of-web.com/freebies/css3-simple-shapes-cheat-sheet.html

编辑：Utkanos是正确的，你可以创建形状，用我所做的链接，但要记住div容器会以块的形式输出。

2013-06-01 20:19:51

这主要是因为盒模型概念要求块级元素是矩形的。这样做的原因是允许可预测的行为，例如，当堆叠在一起或彼此相邻时，这些元素如何相互作用。（旁注：这适合早期的互联网，因为网站是基于垂直的，并且几乎没有视觉定义的容器 - 它是一个接一个的文本块，可能是被一张图片打断。水平堆叠的东西并不会直到后来才真正进入它。）

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

然而，重要的是要记住，这样的模拟形状将被浏览器视为具有边界BOX。这是支配一个元素与另一个元素有多近，以及它们的边缘如何相交的基本原则。

来源

2013-06-01 20:20:47 Utkanos

的Html5

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

可以用来绘制形状。

来源

2013-06-01 20:58:47 VDN

其实，它的JavaScript，做绘图。画布只是，呃，画布。 – Rob

OP中存在价值，认识到画布提供了网页上更复杂形状的可能性。然而，这些形状当然不是HTML元素，但是这些位图是不可识别的（作为元素），并且只在曾经被提交给画布的视觉内存中存在。 – Utkanos

HTML和CSS都不是绘图程序。虽然可以创建这些对象，但至少在某种程度上它们是令人费解的黑客。

来源

2013-06-01 21:17:18 Rob

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

现在，就CSS而言，自开始以来已经走过了很长一段路。所以，虽然没有简单的方法来做到这一点，但你提到的大多数东西都可以用CSS实现。像圈子这样的东西其实很简单。当涉及到三角形时，它更难一点。但是现在很多事情都可以通过一些CSS和JavaScript来实现。有很多Javascript库专门用于绘制/动画素材。

来源

2013-06-01 21:54:35 galdikas

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

来源

2013-06-01 22:03:13

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

SVG的进一步信息：

来源

2013-06-01 23:24:49 lukasdietrich

CSS或HTML中的形状

回答

相关问题