可以使用三角形状编写带内容的HTML块吗？

Question

我曾经合作过的一位设计师给我发送了一个网站设计的概念。

这是一个包含文章列表的页面部分 -

据我观察，大部分粉色多边形只是背景，有些三角形和菱形可以包含短文本（我用灰色笔刷遮盖了它），标题和图标有时也会出现。

我想知道是否有一种在html/css/js中实现它而不使用flash的方法？

- shershen

---

你可以在HTML5中使用canvas或svg。 - Saju

这可能会对你有所帮助 CSS3 Shapes。 - Hary

可能只需要使用CSS和图片就可以完成，这取决于您的需求。 - showdev

Answer 1

这可以通过使用一些（稍微繁琐的）CSS阻止方式以兼容旧版浏览器的方式实现...

http://jsfiddle.net/AuZ5H/2

.wrapper {
    background-color: #eee;
    width: 250px;
    height: 225px;
    font-size: 8px;
    overflow: hidden;
}
.block {
    float: right;
    clear: right;
    background-color: #ddd;
    height: 25px;
}
.block1 {
    width: 200px;
}
.block2 {
    width: 150px;
}
.block3 {
    width: 100px;
}
.block4 {
    width: 50px;
}
.block5 {
    width: 1px;
}

<div class="wrapper">
    <div class="block block1"></div>
    <div class="block block2"></div>
    <div class="block block3"></div>
    <div class="block block4"></div>
    <div class="block block5"></div>
    <div class="block block4"></div>
    <div class="block block3"></div>
    <div class="block block2"></div>
    <div class="block block1"></div>
    Content here.
</div>

显然，你使用的块越多，每个块高度越小，布局就会更加细致。你需要为菱形（菱形？）双倍并反转块。

- isherwood

Answer 2

您可以使用具有JavaScript功能的dynamicHtml。示例站点：http://trickyscripter.com/examples/after/jsgraphics_e.htm 一些JavaScript库非常好：请尝试：http://raphaeljs.com/ 您可以使用html5 Canvas：示例站点：http://www.williammalone.com/articles/html5-canvas-example/ 您可以创建一个巨大的texture.png，形状像钻石，并将其左对齐或右对齐。（首选）

请记住，“块”就是块。

- Milche Patern