[CSS]div要素一つでパンツを実装♪

div要素一つで実装するパンツをご紹介。

↑はdiv要素一つで実装していますｗ

アイデアの元となったのは、こちらのイラスト。

Underpants

このイラストにインスパイアされて、実装したそうです。
実装は、こんな感じ。

HTML

HTMLは、空のdiv要素一つです。

<div class="underpants"></div>

CSS

CSSはちょっと長め。
カラーはお好みのものに変えて、簡単に利用できます。

.underpants
{
width:20em;
height:13em;
background: #82e1ec;
margin:0 auto;
border-radius:0em 0em 9em 9em;
border:0.7em solid #00373f;
overflow:hidden;
position:relative;
box-shadow:inset 0em 1.4em 0em #fff,
inset 0em 2.1em 0em #00373f;
display:inline-block;
  margin-left:2em;
}

.underpants:before
{
content:"";
border-radius:35%;
position:absolute;
width:12em;
height:12em;
background: #017482;
border:0.7em solid #00373f;
left:-80px;
bottom:-90px;
border-radius:50% 50% 0% 0%;
z-index:2;
}
.underpants:after
{
content:"";
border-radius:35%;
position:absolute;
width:12em;
height:12em;
background: #017482;
border:0.7em solid #00373f;
right:-80px;
bottom:-90px;
border-radius:50% 50% 0% 0%;
z-index:2;
}

元イラストに限りなく近いパンツは、div要素二つで実装できます。

Underpants