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

Question

我曾经和我一起工作的设计师给我发了一个网站设计的概念。

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

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

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

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>

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

Answer 2

你可以使用dynamicHtml有javascript。示例网站：http://trickyscripter.com/examples/after/jsgraphics_e.htm

一些javascript库非常好：试试：http://raphaeljs.com/

您可以使用html5 Canvas：示例网站：http://www.williammalone.com/articles/html5-canvas-example/

你可以创建一个巨大的texture.png形状有一个钻石并向左或向右对齐。 （喜爱）

请记住'块'是块。