mirror of
https://github.com/servo/servo.git
synced 2025-06-27 02:23:41 +01:00
44 lines
1.2 KiB
HTML
44 lines
1.2 KiB
HTML
<!DOCTYPE html>
|
|
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
|
|
<style>
|
|
.transformed {
|
|
transform: rotate(25deg);
|
|
transform-origin: bottom right;
|
|
background: hotpink;
|
|
}
|
|
.child {
|
|
margin-left: auto;
|
|
width: 50px;
|
|
background: lime;
|
|
}
|
|
.fake-column {
|
|
float: left;
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
.fake-column:not(:last-child) {
|
|
margin-right: 20px;
|
|
}
|
|
</style>
|
|
<div style="width:460px; column-gap:20px; margin-top:50px; height:100px; background:yellow;">
|
|
<div class="fake-column">
|
|
<div class="transformed" style="margin-top:50px; height:50px;">
|
|
<div class="child" style="height:50px;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="fake-column">
|
|
<div class="transformed" style="height:100px;">
|
|
<div class="child" style="height:100px;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="fake-column">
|
|
<div class="transformed" style="height:25px;">
|
|
<div class="child" style="height:100px;"></div>
|
|
</div>
|
|
</div>
|
|
<div class="fake-column">
|
|
<div class="transformed" style="height:0;">
|
|
<div class="child" style="height:50px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|