ハロウィンで見られるカボチャをCSSだけで作りました。
(果樹園で見た気がする...)
その1
html
<div class="jack_o_lantern">
<!-- 蔕(ヘタ) -->
<div class="calyx"></div>
<div class="nose"></div>
<div class="mouth"></div>
</div>
css
.jack_o_lantern{
position: relative;
width: 250px;
height: 200px;
margin: 40px 0 0 10px;
border: 1px solid #000;
border-radius: 80% 80% 100% 100% / 100%;
background: #EF9C00;
}
/* 目 */
.jack_o_lantern:before,
.jack_o_lantern:after{
position: absolute;
display: inline-block;
content: "";
border: 25px solid transparent;
border-bottom: 35px solid #000;
}
.jack_o_lantern:before{
left: 50px;
}
.jack_o_lantern:after{
right: 50px;
}
/* 蔕(ヘタ) */
.jack_o_lantern .calyx{
position: absolute;
left: 50%;
width: 30px;
height: 60px;
border-radius: 0 100% 30% 100%;
background: #5D572E;
transform: translate(-50%,-50%);
z-index: -1;
}
/* 鼻 */
.jack_o_lantern .nose{
position: absolute;
top: 35%;
left: 50%;
border: 15px solid transparent;
border-bottom: 25px solid #000;
transform: translate(-50%,-50%);
}
/* 口 */
.jack_o_lantern .mouth{
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 100px;
border-bottom: 30px solid #000;
border-radius: 100%;
transform: translate(-50%,-50%);
}
その2
html
<div class="jack_o_lantern">
<!-- 蔕(ヘタ) -->
<div class="calyx"></div>
<div class="nose"></div>
<div class="mouth"></div>
<!-- 唇 -->
<div class="lip"></div>
</div>
css
.jack_o_lantern{
position: relative;
width: 250px;
height: 200px;
margin: 40px 0 0 10px;
border: 1px solid #000;
border-radius: 80% 80% 100% 100% / 100%;
background: #EF9C00;
}
/* 目 */
.jack_o_lantern:before,
.jack_o_lantern:after{
position: absolute;
display: inline-block;
content: "";
border: 25px solid transparent;
border-bottom: 35px solid #000;
}
.jack_o_lantern:before{
left: 50px;
}
.jack_o_lantern:after{
right: 50px;
}
/* 蔕(ヘタ) */
.jack_o_lantern .calyx{
position: absolute;
left: 50%;
width: 30px;
height: 60px;
border-radius: 0 100% 30% 100%;
background: #5D572E;
transform: translate(-50%,-50%);
z-index: -1;
}
/* 鼻 */
.jack_o_lantern .nose{
position: absolute;
top: 35%;
left: 50%;
border: 15px solid transparent;
border-bottom: 25px solid #000;
transform: translate(-50%,-50%);
}
/* 口 */
.jack_o_lantern .mouth{
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 100px;
border-bottom: 30px solid #000;
border-radius: 100%;
transform: translate(-50%,-50%);
}
/* 唇 */
.jack_o_lantern .lip{
position: absolute;
top: 50%;
left: 50%;
width: 200px;
height: 100px;
border-bottom: 50px double red;
border-radius: 0 0 100% 100%;
transform: translate(-50%,-50%);
}
その3
<div class="jack_o_lantern">
<!-- 蔕(ヘタ) -->
<div class="calyx"></div>
<div class="nose"></div>
<div class="mouth"></div>
</div>
.jack_o_lantern{
position: relative;
width: 250px;
height: 200px;
margin: 40px 0 0 10px;
border: 1px solid #000;
border-radius: 80% 80% 100% 100% / 100%;
background: #EF9C00;
}
/* 目 */
.jack_o_lantern:before,
.jack_o_lantern:after{
position: absolute;
display: inline-block;
content: "";
border: 25px solid transparent;
border-bottom: 35px solid #000;
}
.jack_o_lantern:before{
left: 50px;
}
.jack_o_lantern:after{
right: 50px;
}
/* 蔕(ヘタ) */
.jack_o_lantern .calyx{
position: absolute;
left: 50%;
width: 30px;
height: 60px;
border-radius: 0 100% 30% 100%;
background: #5D572E;
transform: translate(-50%,-50%);
z-index: -1;
}
/* 鼻 */
.jack_o_lantern .nose{
position: absolute;
top: 35%;
left: 50%;
border: 15px solid transparent;
border-bottom: 25px solid #000;
transform: translate(-50%,-50%);
}
/* 口 */
.jack_o_lantern .mouth{
position: absolute;
top: 70%;
left: 50%;
width: 200px;
height: 5px;
border: 2px dashed #EF9C00;
border-radius: 0 0 100% 100%;
background: #000;
transform: translate(-50%,-50%);
}
border-styleのdashed
でチャック口を作っています。