70 lines
1.9 KiB
HTML
70 lines
1.9 KiB
HTML
<html>
|
|
<head>
|
|
<style>
|
|
.container {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100px;
|
|
height: 100px;
|
|
font: 30px / 1 Ahem, sans-serif;
|
|
color: red;
|
|
border: 1px solid green;
|
|
border-top: 5px solid green;
|
|
}
|
|
.shape-outside {
|
|
width: 100px;
|
|
height: 100px;
|
|
background-color: rgba(15, 117, 117, 0.5);
|
|
}
|
|
.leftFloatTriangle {
|
|
-webkit-shape-outside: polygon(0px 0px, 100px 50px, 0px 100px);
|
|
float: left;
|
|
}
|
|
.rightFloatTriangle {
|
|
-webkit-shape-outside: polygon(100px 0px, 0px 50px, 100px 100px);
|
|
float: right;
|
|
}
|
|
.leftFloatUpperLeftTirangle {
|
|
-webkit-shape-outside: polygon(0px 0px, 100px 0px, 0px 100px);
|
|
float: left;
|
|
}
|
|
.rightFloatUpperRightTriangle {
|
|
-webkit-shape-outside: polygon(100px 0px, 0px 0px, 100px 100px);
|
|
float: right;
|
|
}
|
|
.overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 102px;
|
|
height: 106px;
|
|
background-color: green;
|
|
}
|
|
</style>
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="shape-outside leftFloatTriangle"></div> X X
|
|
</div>
|
|
<div class="container" style="left: 140px;">
|
|
<div class="shape-outside rightFloatTriangle"></div> X X
|
|
</div>
|
|
<div class="container" style="top: 140px;">
|
|
<div class="shape-outside leftFloatUpperLeftTirangle"></div> X X
|
|
</div>
|
|
<div class="container" style="top: 140px; left: 140px;">
|
|
<div class="shape-outside rightFloatUpperRightTriangle"></div> X X
|
|
</div>
|
|
<div class="overlay"></div>
|
|
<div class="overlay" style="left: 140px"></div>
|
|
<div class="overlay" style="top: 140px"></div>
|
|
<div class="overlay" style="top: 140px; left: 140px;"></div>
|
|
|
|
<p style="margin-top: 280px;">The content should wrap around the triangle shapes, it should fit in the content box, so you should see four green rectangles.
|
|
You shouldn't see any red.</p>
|
|
<p><a href='http://webkit.org/b/128693'>Bug 128693</a>: [CSS Shapes] Adjust lineTop position to the next available wrapping location at shape-outsides</p>
|
|
</body>
|
|
</html>
|