Question

如何在HTML或CSS中制作它们？

例如： http://draw.to/D11KGJr

我听说过地图标记，但它似乎只会生成一个不可见的可点击区域，您无法在其上应用CSS属性，例如边框或背景。

Answer 1

如果您正在谈论该绘图：它是canvas元素。

请参阅此处获取教程：https://developer.mozilla.org/en-US/docs/Canvas_tutorial

Answer 2

这是可能的 - 在限制范围内，并且仅在较新的浏览器上 - 使用CSS3技术。有关示例，请参阅此CSS3 Twitter Fail Whale。

Answer 3

使用canvas元素。

规格：http://www.w3.org/TR/2011/WD-html5-20110525/the-canvas-element.html#the-canvas-element

基于一个特定浏览器实施的文档：https://developer.mozilla.org/en-US/docs/HTML/Canvas

非正式文档：http://diveintohtml5.info/canvas.html和http://www.html5canvastutorials.com/

对于非矩形元素，还有其他方法，如果您可以更多地了解您的具体要求，则可能更适合您实际需要的内容。

Answer 4

除了使用CSS 3技术之外，您还可以在HTML文档中嵌入SVG。

jsFiddle

<!doctype html>
<html>
  <!-- <head> ... -->
  <body>
    Taken from <a href="http://commons.wikimedia.org/wiki/File:SVG_example7.svg?uselang=de">http://commons.wikimedia.org/wiki/File:SVG_example7.svg?uselang=de</a>, thanks to <a href="http://commons.wikimedia.org/wiki/User_talk:Sarang?uselang=de">Sarang</a>!
    <hr />
    <svg xmlns="http://www.w3.org/2000/svg" width="304" height="290">
      <path d="M2,111h300 l-242.7,176.3 92.7-285.3 92.7,285.3z" fill="#FB2" stroke="#B00" stroke-width="4" stroke-linejoin="round"/>
    </svg>
  </body>
</html>

不规则形状的DOM元素

4 个答案: