Clever Geek Handbook

Is it possible to encode html blocks with triangle shape and content?

The designer I worked with sent me a website design concept.

Here's the part of the page containing the list of posts - list of blocks

As I can see, most of these pink polygons are just backgrounds and some triangles and rhombuses may contain short text (masked with gray brushes) and sometimes icons.

I wonder if there is a way to do this in html / css / js without flash?

+3


source to share


2 answers


You can use dynamicHtml with javascript. Sample site: http://trickyscripter.com/examples/after/jsgraphics_e.htm

Some javascript libraries are not bad: try it: http://raphaeljs.com/

You can use html5 Canvas: Sample site: http://www.williammalone.com/articles/html5-canvas-example/



You can create a huge texture. png has a diamond and aligns it left or right. (Favorite)

Keep in mind that "blocks" are blocks.

+1


source


This can be done using an outdated browser using some (a little cumbersome) CSS blocking ...

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>

Obviously, the more blocks you use, each with a lower height, the more granular the layout. You will need to double and unfold the blocks for your rhombuses (rhombus?).

+1


source






More articles:


All Articles