html - 是否可以编写具有三角形形状和内容的 html 块？

Question

我曾经一起工作的一位设计师向我发送了网站设计的概念。

这是一个包含帖子列表的部分页面 -

正如我所见，这些粉红色多边形的大部分只是一个背景，一些三角形和菱形可以包含短文本（我用灰色画笔遮住了它）标题，有时还有图标。

我想知道有没有办法在没有 Flash 的 html/css/js 中做到这一点？

Answer 1

您可以使用具有 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 形状的菱形并将其左对齐或右对齐。（最喜欢的）

请记住，“块”是块。

Answer 2

这可以使用一些（稍微麻烦的）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>

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