我需要创建一个
HTML页面,如下图所示.
我不知道如何创建包含文本的可点击表单.
文本不应该是图像,也不应超过其区域(如溢出：隐藏)
我在HTML中尝试了区域和地图,但是无法将文本放入其中.
请问怎么做？
编辑：
在阅读了Phrogz的答案之后,我尝试了SVG的其他内容,但我的文字不在我的三角形中？我不明白为什么.
演示(在底部检查)：
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>
解决方法
你可能想在这里给CSS3一个镜头……
你应该让你的代码更加跨浏览器(例如添加-moz-transform等).
并且必须尝试更难以实现字母的内部阴影,但是你可以这样做：
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>
和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,.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,.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;
}
