如何在CSS3或SVG或HTML（5）中创建带有文本的形状？

I need to create an HTML page as shown in the following image.

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

I don't know how to create clickable forms containing text.

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

The text should not be an image and not exceed its area (like an overflow: hidden)

文本不应该是图像，也不应超过其区域（如溢出：隐藏）

I tried areas and maps in HTML but it is not possible to put text inside.

我在HTML中尝试了区域和地图，但是无法将文本放入其中。

How to do that please ?

请问怎么做？

EDIT :

编辑：

I tried something else with SVG after reading the Phrogz's answers but my text is out of my triangle ? I don't understand why.

在阅读了Phrogz的答案后，我尝试了SVG的其他内容，但我的文字不在我的三角形中？我不明白为什么。

Demo (check at the bottom) : http://jsfiddle.net/r7Jyy/3/

演示（在底部查看）：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>

2 个解决方案

#1

You might want to give CSS3 a shot here ...

你可能想在这里给CSS3一个镜头......

You should just make your code a bit more cross-browser ( e.g. adding -moz-transform, etc.. )

你应该让你的代码更加跨浏览器（例如添加-moz-transform等）。

And have to try a bit harder to achieve inner-shadow of the letters, but you can do this with :

并且必须尝试更难以实现字母的内部阴影，但是你可以这样做：

HTML :

HTML：

  <div class='container'>
    <div class='text'>Hello<br />World<br /> I'm Steffi</div>
    <div class='triangleA'></div>
    <div class='triangleB'>
      <div class='text'>
        Can you <br />
        Help Me Please</div>
    </div>
    <div class='triangleC'>
      <div class='text'>
        Stackover-<br />flow.com
      </div>
    </div>
  </div>

and CSS :

和CSS：

.container {
  position: absolute;
  overflow: hidden;
  width: 550px;
  height: 500px;
  background: #9f9f9f;
}

div.text {
  font: bold 45px 'Helvetica';
  text-align: left;
  margin: 120px 0 0 180px;
  line-height: 40px;
  color: #3f3f3f;
  text-transform: uppercase;
  text-shadow: 0px 1px rgba(255,255,255,.4);
}

div.triangleA, div.triangleB, div.triangleC {
  position: absolute;
}

div.triangleA {
  background: #afafaf;
  width: 500px;
  height: 600px;
  -webkit-transform: rotate(45deg);
  top: -350px;
  left: -230px; 
}

div.triangleB {
  background: rgba(255,255,255,.4);
  overflow: hidden;
  width: 500px;
  height: 600px;
  -webkit-transform: rotate(-70deg);
  top: 200px;
  left: -230px; 
}

div.triangleB div.text {
  -webkit-transform: rotate(70deg);
  margin-left: 240px;
  margin-top: 550px;
  width: 500px;
}

div.triangleC {
  background: #8f8f8f;
  -webkit-transform: rotate(-25deg);
  top: 370px;
  left: 100px;
  height: 300px;
  width: 600px;
  overflow: hidden;
}

div.triangleC div.text { 
    -webkit-transform: rotate(25deg); 
    margin: 0;
    margin-left: 190px;
    margin-top: 60px;
}

Demo : http://jsbin.com/orazod/1/edit

演示：http：//jsbin.com/orazod/1/edit

#2

Here's an SVG example using clipping paths to clip text to arbitrary regions:

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

Demo: 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>

Use SVG's filter effects to create the embossed, inner shadow result on your text. Here's an example (that does not exactly match your needs): http://www.w3.org/2002/05/text.svg

使用SVG的滤镜效果在文本上创建浮雕内部阴影效果。这是一个例子（不完全符合您的需求）：http：//www.w3.org/2002/05/text.svg