html - 如何使用 CSS3 或 SVG 或 HTML(5) 中的文本创建形状？

Question

我需要创建一个 HTML 页面，如下图所示。

我不知道如何创建可点击的表单包含文本。

文字不应该是图片并且不超过它的区域(如溢出:隐藏)

我试过 HTML 中的区域和 map ，但无法在其中放置文本。

请问怎么做？

编辑:

在阅读了 Phrogz 的答案后，我尝试使用 SVG 进行其他操作，但我的文本不在我的三 Angular 形内？我不明白为什么。

演示(查看底部): http://jsfiddle.net/r7Jyy/3/

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0)   -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Calque_1" 
 xmlns="http://www.w3.org/2000/svg" 
 xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="960px" height="560px" 
 viewBox="0 0 960 560" 
 style="enable-background:new 0 0 960 560;" xml:space="preserve">
   <g>
      <polygon style="fill-rule:evenodd;clip-rule:evenodd;fill:none;" points="524.131,495.773 524.771,495.615 524.179,495.282 "/>
      <polygon style="fill-rule:evenodd;clip-rule:evenodd;fill:#CCC;" points="569.476,-10 212.575,320.5 524.179,495.282 572.75,-1.521 "/>
   </g>
   <text transform="matrix(1 0 0 1 236 255)">
      <tspan x="0" y="0" style="fill:#888; font-family:'Arial'; font-size:36.0467;">500% </tspan>
      <tspan x="0" y="30.039" style="fill:#888; font-family:'Arial'; font-size:36.0467;">New</tspan>
    </text>
 </svg>

Answer 1

这是一个使用剪切路径将文本剪切到任意区域的 SVG 示例:

演示:http://jsfiddle.net/r7Jyy/

<svg xmlns="http://www.w3.org/2000/svg">
  <defs><clipPath id="triangle1">
    <polygon points="10,30 180,60 250,10"/>
  </clipPath></defs>
  <polygon points="10,30 180,60 250,10" fill="none" stroke="black"/>
  <text x="20" y="50" clip-path="url(#triangle1)">Hello World</text>
</svg>

使用SVG's filter effects在您的文本上创建浮雕内阴影效果。这是一个示例(不完全符合您的需求):http://www.w3.org/2002/05/text.svg