[英]How to create shape with text in CSS3 or SVG or HTML(5)?
我需要創建一個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>
這是一個SVG示例,使用剪切路徑將文本剪輯到任意區域:
<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的濾鏡效果在文本上創建浮雕內部陰影效果。 這是一個例子(不完全符合您的需求): http : //www.w3.org/2002/05/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,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;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.