57 lines
1.4 KiB
HTML
57 lines
1.4 KiB
HTML
<!DOCTYPE html>
|
|
<title>CSS Test: polygon shape-outside on floats</title>
|
|
<link rel="author" title="Adobe" href="http://html.adobe.com/">
|
|
<link rel="author" title="Bem Jones-Bey" href="mailto:bjonesbe@adobe.com">
|
|
<link rel="help" href="http://dev.w3.org/csswg/css-shapes-1/#shape-outside-property">
|
|
<link rel="match" href="shape-outside-floats-polygon-002-ref.html">
|
|
<meta name="flags" content="ahem">
|
|
<style>
|
|
.container {
|
|
font: 20px/1 Ahem, sans-serif;
|
|
line-height: 20px;
|
|
width: 400px;
|
|
height: 400px;
|
|
background: blue;
|
|
-webkit-writing-mode: vertical-rl;
|
|
}
|
|
.float-left {
|
|
width: 200px;
|
|
height: 200px;
|
|
-webkit-shape-outside: polygon(0px 0px, 200px 200px, 200px 0px);
|
|
float: left;
|
|
}
|
|
.float-right {
|
|
margin-top: 100px;
|
|
width: 200px;
|
|
height: 100px;
|
|
-webkit-shape-outside: polygon(0px 100px, 0px -100px, 200px 100px) content-box;
|
|
float: right;
|
|
}
|
|
</style>
|
|
<body>
|
|
<div class="container">
|
|
<div class="float-left"></div>
|
|
XXXXXXXXXX
|
|
XXXXXXXXXXX
|
|
XXXXXXXXXXXX
|
|
XXXXXXXXXXXXX
|
|
XXXXXXXXXXXXXX
|
|
XXXXXXXXXXXXXXX
|
|
XXXXXXXXXXXXXXXX
|
|
XXXXXXXXXXXXXXXXX
|
|
XXXXXXXXXXXXXXXXXX
|
|
XXXXXXXXXXXXXXXXXXX
|
|
<div class="float-right"></div>
|
|
XXXXXXXXXXXXXXXXXXX
|
|
XXXXXXXXXXXXXXXXXX
|
|
XXXXXXXXXXXXXXXXX
|
|
XXXXXXXXXXXXXXXX
|
|
XXXXXXXXXXXXXXX
|
|
XXXXXXXXXXXXXX
|
|
XXXXXXXXXXXXX
|
|
XXXXXXXXXXXX
|
|
XXXXXXXXXXX
|
|
XXXXXXXXXX
|
|
</div>
|
|
</body>
|