不规则形状的DOM元素

时间:2012-08-31 14:05:55

标签: html css

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

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

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

4 个答案:

答案 0 :(得分:2)

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

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

答案 1 :(得分:1)

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

答案 2 :(得分: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.htmlhttp://www.html5canvastutorials.com/

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

答案 3 :(得分: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>