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

これは 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 を埋め込むこともできます。

jsフィドル

<!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 に答える
1

これは、CSS3 技術を使用して、制限内で、新しいブラウザーでのみ可能です。例については、このCSS3 Twitter Fail Whaleを参照してください。

于 2012-08-31T14:08:07.333 に答える