LoginSignup
15
15

More than 5 years have passed since last update.

CSSでねこのシルエットを作ってみた。

Last updated at Posted at 2015-10-30

sample.png

html


<div class="cat small">
  <div class="head black"></div>
  <div class="body black"></div>
  <div class="tail black"></div>
</div>

sample.png CSS


.cat{
  position: relative;
  width: 120px;
  height: 200px;
}

/* 頭 */
.cat > .head{
  position: absolute;
  bottom: 47%;
  left: 5px;
  width: 85%;
  height: 40%;
  border-radius: 100%;
}

/* 耳 */
.cat > .head:before,
.cat > .head:after{
  position: absolute;
  top: -35px;
  content: "";
  display: inline-block;
  border: 20px solid transparent;
  border-bottom: 40px solid;
  border-bottom-color: inherit;
  border-radius: 40%;
}

.cat > .head:before{
  left: 10px;
}

.cat > .head:after{
  right: 10px;
}

/* 体 */
.cat > .body{
  position: absolute;
  bottom: 0;
  right: 5px;
  width: 80%;
  height: 60%;
  border-radius: 20% 100% 30% 40%;
}

/* 尻尾 */
.cat > .tail{
  position: absolute;
  bottom: -25%;
  right: 6px;
  width: 10%;
  height: 30%;
  border: 8px solid;
  border-left-color: transparent; 
  border-radius: 100%;
  background: transparent;
  transform: rotate(10deg) translateY(-75%);
}

/* 色 */
.black{
  background: black;
  color: black;
}

/* 大きさ */
.small{
  transform: scale(1);
}

transformのscaleで大きさを変えられます。

15
15
0

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
15
15