Вот внутренняя монголия.
Это не было шуткой.
Прелесть в том, что здесь не используется никакая графика и всё задано чисто стилями отступов, границ, градиентов и т. д., чистый код.
[html]<style>
.mongolia-demo {
--bg-1: #f7f0e4;
--bg-2: #eadbc2;
--sand: #d8be8d;
--grass: #9aae6d;
--hill: #b98d5c;
--wood-1: #c7925d;
--wood-2: #9a673b;
--line: #8b633f;
--text-1: #5e452f;
--text-2: #866448;
--sky: #dff1f7;
--cloud: rgba(255,255,255,0.8);
--tent-1: #f7f1e7;
--tent-2: #ddc7a1;
--red: #b95c4d;
width: 360px;
margin: 24px auto;
font-family: "Segoe UI", sans-serif;
text-align: center;
color: var(--text-1);
}
.mongolia-demo__title {
margin-bottom: 8px;
font-size: 20px;
font-weight: 700;
}
.mongolia-demo__subtitle {
margin-bottom: 14px;
font-size: 14px;
line-height: 1.35;
color: var(--text-2);
}
.mongolia-demo__scene {
position: relative;
}
.mongolia-demo__toggle {
position: absolute;
opacity: 0;
pointer-events: none;
}
.mongolia-demo__label {
display: inline-block;
margin-bottom: 14px;
padding: 8px 16px;
border-radius: 999px;
background: #ecd8b4;
border: 2px dashed #b88e62;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: transform .2s ease, background .2s ease;
}
.mongolia-demo__label:hover {
transform: translateY(-1px);
}
.mongolia-demo__label:active {
transform: translateY(1px);
}
.mongolia-demo__box-wrap {
position: relative;
width: 100%;
height: 290px;
margin-bottom: 14px;
perspective: 1000px;
}
.mongolia-demo__box {
position: absolute;
inset: 48px 0 0;
border: 3px solid var(--wood-2);
border-radius: 0 0 26px 26px;
background: linear-gradient(180deg, #f9f4ea 0%, #efe2ca 100%);
box-shadow: 0 12px 26px rgba(102, 74, 43, 0.18);
overflow: hidden;
}
.mongolia-demo__box::before {
content: "";
position: absolute;
top: -16px;
left: -3px;
width: calc(100% + 6px);
height: 24px;
border: 3px solid var(--wood-2);
border-bottom: none;
border-radius: 18px 18px 0 0;
background: #e6c697;
box-sizing: border-box;
}
.mongolia-demo__lid {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 76px;
transform-origin: top center;
transition: transform .9s cubic-bezier(.2,.7,.2,1);
z-index: 4;
}
.mongolia-demo__lid-top {
position: absolute;
inset: 0;
border: 3px solid var(--wood-2);
border-radius: 24px 24px 16px 16px;
background: linear-gradient(180deg, #e6c697 0%, #cf9d64 100%);
box-shadow: 0 8px 20px rgba(102, 74, 43, 0.18);
}
.mongolia-demo__lid-top::before {
content: "📦";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 28px;
}
.mongolia-demo__inside {
position: absolute;
inset: 0;
opacity: 0;
transform: translateY(10px) scale(.98);
transition: opacity .45s ease .15s, transform .45s ease .15s;
}
/* Пейзаж */
.mongolia-demo__sky {
position: absolute;
inset: 0 0 95px 0;
background: linear-gradient(180deg, var(--sky) 0%, #eef9fb 100%);
}
.mongolia-demo__cloud,
.mongolia-demo__cloud::before,
.mongolia-demo__cloud::after {
position: absolute;
background: var(--cloud);
border-radius: 999px;
}
.mongolia-demo__cloud {
width: 54px;
height: 18px;
top: 32px;
left: 42px;
}
.mongolia-demo__cloud::before {
content: "";
width: 22px;
height: 22px;
left: 8px;
top: -10px;
}
.mongolia-demo__cloud::after {
content: "";
width: 26px;
height: 26px;
right: 8px;
top: -12px;
}
.mongolia-demo__cloud--2 {
top: 54px;
left: 238px;
transform: scale(.85);
}
.mongolia-demo__sun {
position: absolute;
top: 20px;
right: 32px;
width: 34px;
height: 34px;
border-radius: 50%;
background: #ffd980;
box-shadow: 0 0 0 8px rgba(255,217,128,.18);
}
.mongolia-demo__hill {
position: absolute;
bottom: 78px;
border-radius: 50%;
}
.mongolia-demo__hill--1 {
left: -20px;
width: 160px;
height: 80px;
background: #cba173;
}
.mongolia-demo__hill--2 {
left: 90px;
width: 170px;
height: 88px;
background: #bb8d5b;
}
.mongolia-demo__hill--3 {
right: -16px;
width: 150px;
height: 74px;
background: #c39567;
}
.mongolia-demo__steppe {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 102px;
background:
radial-gradient(circle at 10% 20%, rgba(255,255,255,.14) 0 10px, transparent 11px),
linear-gradient(180deg, #b7c781 0%, var(--grass) 100%);
}
.mongolia-demo__path {
position: absolute;
left: 108px;
bottom: -18px;
width: 112px;
height: 90px;
background: #ceb07d;
border-radius: 50%;
transform: rotate(-8deg);
opacity: .9;
}
.mongolia-demo__yurt {
position: absolute;
left: 134px;
bottom: 48px;
width: 88px;
height: 58px;
background: linear-gradient(180deg, var(--tent-1) 0%, var(--tent-2) 100%);
border: 2px solid #b9986b;
border-radius: 46px 46px 14px 14px;
z-index: 2;
}
.mongolia-demo__yurt::before {
content: "";
position: absolute;
top: -18px;
left: 16px;
width: 52px;
height: 26px;
background: linear-gradient(180deg, #f9f6ef 0%, #e8d6b3 100%);
border: 2px solid #b9986b;
border-bottom: none;
border-radius: 52px 52px 0 0;
}
.mongolia-demo__yurt::after {
content: "";
position: absolute;
left: 33px;
bottom: 0;
width: 18px;
height: 26px;
background: #b86a56;
border-radius: 8px 8px 0 0;
border: 2px solid #945141;
border-bottom: none;
}
.mongolia-demo__pole {
position: absolute;
width: 2px;
background: #7f5736;
bottom: 72px;
z-index: 1;
}
.mongolia-demo__pole--1 {
left: 104px;
height: 34px;
}
.mongolia-demo__pole--2 {
right: 92px;
height: 28px;
}
.mongolia-demo__flag {
position: absolute;
top: 0;
left: 2px;
width: 16px;
height: 10px;
background: #d06c54;
border-radius: 0 6px 6px 0;
}
.mongolia-demo__camel {
position: absolute;
left: 62px;
bottom: 48px;
font-size: 28px;
z-index: 2;
opacity: .9;
}
.mongolia-demo__horse {
position: absolute;
right: 58px;
bottom: 42px;
font-size: 24px;
z-index: 2;
opacity: .92;
}
.mongolia-demo__note {
position: relative;
min-height: 44px;
font-size: 13px;
line-height: 1.4;
color: var(--text-2);
}
.mongolia-demo__note-closed,
.mongolia-demo__note-open {
display: block;
transition: opacity .25s ease, transform .25s ease;
}
.mongolia-demo__note-open {
position: absolute;
inset: 0;
opacity: 0;
transform: translateY(6px);
}
.mongolia-demo__toggle:checked ~ .mongolia-demo__label {
background: #f0dfc1;
}
.mongolia-demo__toggle:checked ~ .mongolia-demo__box-wrap .mongolia-demo__lid {
transform: rotateX(78deg);
}
.mongolia-demo__toggle:checked ~ .mongolia-demo__box-wrap .mongolia-demo__inside {
opacity: 1;
transform: translateY(0) scale(1);
}
.mongolia-demo__toggle:checked ~ .mongolia-demo__note .mongolia-demo__note-closed {
opacity: 0;
transform: translateY(-6px);
}
.mongolia-demo__toggle:checked ~ .mongolia-demo__note .mongolia-demo__note-open {
opacity: 1;
transform: translateY(0);
}
</style>
<div class="mongolia-demo">
<div class="mongolia-demo__scene">
<input class="mongolia-demo__toggle" type="checkbox" id="open-inner-mongolia">
<label class="mongolia-demo__label" for="open-inner-mongolia">
🏔️ открыть коробочку
</label>
<div class="mongolia-demo__box-wrap">
<div class="mongolia-demo__lid">
<div class="mongolia-demo__lid-top"></div>
</div>
<div class="mongolia-demo__box">
<div class="mongolia-demo__inside">
<div class="mongolia-demo__sky">
<div class="mongolia-demo__sun"></div>
<div class="mongolia-demo__cloud"></div>
<div class="mongolia-demo__cloud mongolia-demo__cloud--2"></div>
<div class="mongolia-demo__hill mongolia-demo__hill--1"></div>
<div class="mongolia-demo__hill mongolia-demo__hill--2"></div>
<div class="mongolia-demo__hill mongolia-demo__hill--3"></div>
</div>
<div class="mongolia-demo__steppe">
<div class="mongolia-demo__path"></div>
</div>
<div class="mongolia-demo__pole mongolia-demo__pole--1">
<div class="mongolia-demo__flag"></div>
</div>
<div class="mongolia-demo__pole mongolia-demo__pole--2">
<div class="mongolia-demo__flag"></div>
</div>
<div class="mongolia-demo__camel">🐫</div>
<div class="mongolia-demo__horse">🐎</div>
<div class="mongolia-demo__yurt"></div>
</div>
</div>
</div>
</div>
</div>[/html]