45 lines
1.8 KiB
HTML
45 lines
1.8 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
.contents { border:2px solid skyblue; background-color:#cccccc; -webkit-margin-before:6px; -webkit-margin-after:6px }
|
|
.fieldset { vertical-align:bottom; -webkit-logical-width:320px; position:relative; display:inline-block; writing-mode:vertical-rl; padding:40px; -webkit-padding-before:0}
|
|
.legend { -webkit-logical-height:64px; -webkit-logical-width: 284px; -webkit-margin-after:34px;background-color:#3080f0; border:8px solid lightblue; font-size:48px }
|
|
.behind-box { position:absolute; background-color:#dddddd; border:12px solid navy; z-index:-1 }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class=fieldset style="writing-mode:vertical-lr">
|
|
<div class="behind-box" style="left:34px; top:0; right:0; bottom:0;"></div>
|
|
<div class=legend>Legend Title</div>
|
|
|
|
<div class=contents>Fieldset Contents</div>
|
|
|
|
<div class=contents>More Fieldset Contents</div>
|
|
|
|
</div>
|
|
|
|
<div class=fieldset style="writing-mode:vertical-rl;">
|
|
<div class="behind-box" style="right:34px; top:0; left:0; bottom:0;"></div>
|
|
<div class=legend>Legend Title</div>
|
|
|
|
<div class=contents>Fieldset Contents</div>
|
|
|
|
<div class=contents>More Fieldset Contents</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class=fieldset style="writing-mode:horizontal-bt">
|
|
<div class="behind-box" style="bottom:34px; top:0; right:0; left:0;"></div>
|
|
<div class=legend>Legend Title</div>
|
|
|
|
<div class=contents>Fieldset Contents</div>
|
|
|
|
<div class=contents>More Fieldset Contents</div>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|