HTML and CSS Reference
In-Depth Information
CSS from the last example in the previous section. The key difference
from the previous example is the addition of the wrap-shape-mode and
wrap-shape properties:
.region {
flow-from: flow1;
wrap-shape-mode: content;
wrap-shape: polygon(
0px,160px 20px,232px 40px,262px
60px,282px 80px,296px 100px,305px 120px,313px
140px,316px 160px,320px 180px,316px 200px,313px
220px,305px 240px,296px 260px,282px 280px,262px
300px,232px 320px,160px 300px,90px 280px,52px
260px,34px 240px,20px 220px,10px 200px,4px
180px,1px 160px,0px 140px,1px 120px,4px
100px,10px 80px,20px 60px,34px 40px,52px
20px,90px 0px,160px
#region1 {
wrap-shape: polygon( 0px,320px 0px,0px 320px,320px 0px,320px );
#region3 {
wrap-shape: polygon( 0px,320px 320px,0px 320px,320px 0px,320px );
The shapes don't have to contain content—they can also exclude it. This
is what the CSS3 Exclusions module is concerned with. The syntax is
exactly the same as for Regions, but instead of content flowing into the
shapes, the content is flowed around them.
In this example, the content
is displaying as normal
inside the #source element.
Then the shapes are abso-
lutely positioned over that
content. This is changed by
using the around keyword
instead of content :
wrap-shape-mode: around;
Search WWH ::

Custom Search