<h3>Lv3:大型貨物自動車等通行止</h3>
<div class="route_sign radius" id="lv3">
<div class="sign_base"></div>
<div class="sign_content">
<div class="truck">
<div class="nidai"></div>
<div class="driver_sheet">
<div class="sheet_top"></div>
<div class="sheet_bottom"></div>
<div class="sheet_win_ushiro"></div>
<div class="sheet_win_mae"></div>
</div>
<div class="banpa"></div>
<div class="wheel">
<p></p>
<p></p>
</div>
</div>
</div>
</div>
:root{
--c-red:#ee0000;
--c-yellow:#ffc000;
--c-blue:#0168b7;
--c-black:#000000;
--c-white:#ffffff;
--sign-size:200px;
}
body{ padding:20px; }
div, p, div:before, div:after{ padding:0px; margin:0; box-sizing:border-box;}
/* 標識のベース設定 */
.route_sign{
width:var(--sign-size);
height:var(--sign-size);
position:relative;
overflow:hidden;
}
.sign_base,
.sign_content{
position:absolute;
width:100%; height:100%;
margin:0;
top:0; bottom:0;
left:0; right:0;
}
/* 丸い標識 */
.route_sign.radius,
.route_sign.radius .sign_base{
border-radius:var(--sign-size);
}
/* ひし形の標識 */
.route_sign.hishigata{
border-radius:0.25em;
transform:rotate(45deg);
/* 回転したことによってふちっこがはみ出てしまう */
margin-top:calc(var(--sign-size) / 4.5);
margin-bottom:calc(var(--sign-size) / 4.5);
margin-left:calc(var(--sign-size) / 4.5);
}
.route_sign.hishigata .sign_content{
transform:rotate(-45deg); /* 0°に戻す */
}
/* 大型貨物自動車等通行止め */
#lv3 .sign_base{
background:var(--c-white);
border:var(--c-black) solid 2px;
}
#lv3 .sign_base:before,
#lv3 .sign_base:after{
content:"";
display:block; position:absolute;
margin:auto;
top:0; bottom:0;
left:0; right:0;
}
#lv3 .sign_base:before{
width:calc(var(--sign-size) - 12px); height:calc(var(--sign-size) - 12px);
border:var(--c-red) solid 23px;
border-radius:var(--sign-size);
}
#lv3 .sign_base:after{
width:calc(var(--sign-size) - 12px); height:15px;
background:var(--c-red);
transform:rotate(45deg);
}
#lv3 .sign_content{
width:calc(var(--sign-size) * 0.6);
height:calc(var(--sign-size) * 0.39);
margin:auto;
}
#lv3 .sign_content .truck{
position:relative;
width:100%; height:100%;
background:var(--c-white);
padding:6px;
}
#lv3 .sign_content .truck *{
background:var(--c-blue);
}
/* 荷台 */
#lv3 .sign_content .truck .nidai{
width:70%;
height:77%;
border-radius:3px 3px 0 0;
}
/* 運転席 */
#lv3 .sign_content .truck .driver_sheet{
width:30%;
height:50%;
position:absolute;
bottom:20px;
right:10px;
background:transparent;
}
#lv3 .sign_content .truck .driver_sheet .sheet_top{
width:100%;
height:100%;
border-radius:0 10px 30px 0 / 0 20px 0 0;
position:relative;
left:-20%;;
}
#lv3 .sign_content .truck .driver_sheet .sheet_bottom{
width:100%;
height:60%;
position:absolute;
right:-3px; bottom:0;
border-radius:0 8px 0 0 / 0 25px 0 0;
}
/* トラックの窓 */
#lv3 .sign_content .truck .driver_sheet .sheet_win_mae,
#lv3 .sign_content .truck .driver_sheet .sheet_win_ushiro{
position:absolute;
top:4px; left:25%;
background:var(--c-white);
width:18%; height:30%;
z-index:20;
transform:skewX(10deg);
border-radius:2px;
}
#lv3 .sign_content .truck .driver_sheet .sheet_win_mae{
width:17%;
left:50%;
}
/* バンパー */
#lv3 .sign_content .truck .banpa{
position:absolute;
width:85%;
height:8px;
border-radius:0 8px 8px 8px;
right:5px;
}
/* タイヤ */
#lv3 .sign_content .truck .wheel{
background:transparent;
position:relative;
top:0px;
}
#lv3 .sign_content .truck .wheel p{
width:17px; height:17px;
border-radius:17px;
position:absolute;
}
#lv3 .sign_content .truck .wheel p:nth-child(1){
left:20px;
}
#lv3 .sign_content .truck .wheel p:nth-child(2){
right:8px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.