forked from mirrors/gecko-dev
b36972ff91
Backed out changeset f5990eb1eb0d (bug 1461046) Backed out changeset 8e0c340b9700 (bug 1461046) Backed out changeset fbfe1d5b94e1 (bug 1461046) Backed out changeset 48057a6ba3d6 (bug 1461046) Backed out changeset 5c8648bcf6bb (bug 1461046) Backed out changeset 157bbc74460a (bug 1461046) Backed out changeset e990d4d07b0e (bug 1461046)
47 lines
1.5 KiB
HTML
47 lines
1.5 KiB
HTML
<!DOCTYPE html>
|
|
<!-- Any copyright is dedicated to the Public Domain.
|
|
- http://creativecommons.org/publicdomain/zero/1.0/ -->
|
|
|
|
<html>
|
|
<meta charset="utf-8">
|
|
<title>CSS Shape Test: float right, polygon(100% 0%, 50% 0%, 0% 0%, 50% 0%, 50% 100%, 0% 100%, 50% 100%) border-box reference</title>
|
|
<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
|
|
<link rel="author" title="Mozilla" href="http://www.mozilla.org/">
|
|
<style>
|
|
.container {
|
|
direction: rtl;
|
|
position: absolute;
|
|
width: 200px;
|
|
line-height: 0;
|
|
}
|
|
|
|
.shape {
|
|
float: right;
|
|
/* Omit shape-outside */
|
|
clip-path: polygon(100% 0%, 50% 0%, 0% 0%, 50% 0%, 50% 100%, 0% 100%, 50% 100%) border-box;
|
|
box-sizing: content-box;
|
|
height: 40px;
|
|
width: 40px;
|
|
padding: 20px;
|
|
border: 20px solid lightgreen;
|
|
margin: 20px;
|
|
background-color: orange;
|
|
}
|
|
|
|
.box {
|
|
position: absolute;
|
|
width: 80px;
|
|
background-color: blue;
|
|
}
|
|
</style>
|
|
|
|
<body class="container">
|
|
<div class="shape"></div>
|
|
<div class="box" style="height: 30px; top: 0; right: 80px;"></div>
|
|
<div class="box" style="height: 30px; top: 30px; right: 80px;"></div>
|
|
<div class="box" style="height: 20px; top: 60px; right: 80px;"></div>
|
|
<div class="box" style="height: 20px; top: 80px; right: 80px;"></div>
|
|
<div class="box" style="height: 30px; top: 100px; right: 80px;"></div>
|
|
<div class="box" style="height: 30px; top: 130px; right: 80px;"></div>
|
|
</body>
|
|
</html>
|