<div class="notice">
👋 Hey, looks like your browser does not support <code>inset-block-start</code>. Try viewing this demo in Firefox.
</div>
<div class="wrapper">
<div class="box box--inset">
<code>50px</code>
</div>
<div class="box box--original"></div>
</div>
:root {
--inset-start: 50px;
}
body {
padding: 1.5rem;
}
.wrapper {
background: #100e17;
border-radius: 8px;
height: 250px;
position: relative;
width: 100%;
}
.box {
align-items: center;
display: flex;
justify-content: center;
height: 100px;
left: 15px;
top: 15px;
width: 100px;
}
.box--inset {
background: #f8a100;
inset-block-start: var(--inset-start);
position: relative;
writing-mode: vertical-lr;
}
.box--original {
background: transparent;
border: 1px dashed #f8a100;
position: absolute;
bottom: 0;
}
.notice {
background: #fff9c4;
border-radius: 8px;
color: #827717;
margin-bottom: 1.5rem;
padding: 1.5rem;
text-align: center;
}
@supports (inset-block-start: 0) {
.notice {
display: none;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.