How to create a form with text in CSS3 or SVG or HTML (5)?

Question

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

I do not know how to create interactive forms containing text .

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

I tried areas and maps in HTML, but the text inside is not possible.

How to do it, please?

EDIT :

I tried something else with SVG after reading Phrogz answers, but my text came out of my triangle? I do not understand why.

Demo (check below): 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

You might want to make CSS3 here ...

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

And you need to try a little harder to achieve the inner shadow of the letters, but you can do it with

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:

 .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

Answer 2

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

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 the effects of the SVG filter to create a bold result of the inner shadow in the text. Here is an example (which doesn't exactly fit your needs): http://www.w3.org/2002/05/text.svg