Edited at

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

More than 3 years have passed since last update.

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で大きさを変えられます。