1

如何用 HTML 或 CSS 制作它们？

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

我听说过 map 标签，但它似乎只生成一个不可见的可点击区域，您不能在其上应用 CSS 属性，如边框或背景。

4

4 回答 4

2

如果你在谈论那幅画：它是一个canvas元素。

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

于 2012-08-31T14:08:46.857 回答
1

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

于 2012-08-31T14:08:07.333 回答
1

这使用了 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/

对于非矩形元素还有其他方法，如果您可以详细说明您的具体要求，可能更适合您的实际需要。

于 2012-08-31T14:12:32.877 回答
1

除了像其他人建议的那样使用 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>
于 2012-08-31T14:54:30.837 回答