LoginSignup
5

More than 5 years have passed since last update.

CSSでお化けカボチャ

Last updated at Posted at 2015-10-12

ハロウィンで見られるカボチャをCSSだけで作りました。
(果樹園で見た気がする...)

その1

jack_o_lantern_1.png

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

jack_o_lantern_2.png

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

jack_o_lantern_3.png


<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でチャック口を作っています。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5