html - 三角形の形と内容でhtmlブロックをコーディングすることは可能ですか？

Question

私が一緒に働いていたデザイナーから、ウェブサイトのデザインのコンセプトが送られてきました。

これが投稿のリストを含むパートページです-

私が見るように、これらのピンクのポリゴンの大部分は単なる背景であり、一部の三角形とひし形には、短いテキスト（灰色のブラシでマスクした）のタイトルと、場合によってはアイコンを含めることができます。

フラッシュなしで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？）のブロックを2倍にして逆にする必要があります。

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を作成し、左または右に揃えることができます。（お気に入り）

「ブロック」はブロックであることに注意してください。