CSS のすゝめ

• (自称)フロントエンドエンジニア
• ペンギンがすき
• TODO

• illustrator
• Figma
• ibisPaint etc.

• お絵描き言語の1つ

• お絵描き言語の1つ
• アニメーションもつけれる

• お絵描き言語の1つ
• アニメーションもつけれる
• 3D表現もできる

• お絵描き言語の1つ
• アニメーションもつけれる
• 3D表現もできる
• Webページのスタイルを指定することもできる

<div></div>

div {
  background-color: var(--black);
  width: 30%;
  aspect-ratio: 1/1;
  border-radius: 50%;
  top: 9%;
  left: calc(50% - 15%);
}

<div></div>

div {
  background-color: var(--black);
  height: 30px;
  width: 100px;
  top: 38%;
  rotate: -60deg;
  left: 16%;
  border-top-left-radius: 20% 100%;
}

<div></div>

div {
  background-color: var(--black);
  height: 30px;
  width: 100px;
  top: 38%;
  rotate: 60deg;
  right: 16%;
  border-top-right-radius: 20% 100%;
}

div.left {
  background-color: var(--white);
  width: 31px;
  height: 23px;
  clip-path: ellipse(39px 38px at -14% 179%);
  top: 35.6%;
  left: 40.5%;
  z-index: 3;
}

div.right {
  background-color: var(--white);
  width: 31px;
  height: 23px;
  clip-path: ellipse(39px 38px at 114% 179%);
  top: 35.6%;
  right: 40.5%;
  z-index: 3;
}

/* 省略 */

/* 省略 */

/* 省略 */

/* 省略 */

/* 省略 */

. {
  width: 70px;
  height: 62px;
  position: absolute;
  top: 46%;
  left: 38%;
  z-index: 4;
}

. .left,
. .right {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
}

. .left::before,
. .left::after,
. .right::before,
. .right::after {
  content: '';
  width: 40%;
  height: 100%;
  display: block;
  position: absolute;
}

. .left::before {
  background-color: var(--black);
  clip-path: polygon(20% 5%, 99% 4%, 68% 17%, 99% 24%, 70% 35%, 80% 42%, 61% 45%, 93% 54%, 73% 64%, 91% 72%, 72% 81%, 87% 87%, 50% 100%, 0 100%);
}

. .left::after {
  background-color: var(--white);
  clip-path: polygon(27% 9%, 81% 8%, 53% 17%, 86% 25%, 58% 34%, 69% 40%, 48% 44%, 83% 55%, 62% 64%, 81% 72%, 62% 81%, 76% 87%, 51% 96%, 10% 97%);
}

. .left div {
  position: absolute;
  background-color: var(--black);
  z-index: 6;
}

. .left div:nth-child(1) {
  height: 2px;
  width: 8px;
  top: 15%;
  left: 13%;
  border-radius: 999px;
}

. .left div:nth-child(2) {
  height: 2px;
  width: 12px;
  top: 26%;
  left: 13%;
  border-radius: 999px;
}

. .left div:nth-child(3) {
  height: 2px;
  width: 8px;
  top: 41%;
  left: 13%;
  border-radius: 999px;
}

. .left div:nth-child(4) {
  height: 2px;
  width: 10px;
  top: 53%;
  left: 17%;
  border-radius: 999px;
}

. .left div:nth-child(5) {
  height: 2px;
  width: 8px;
  top: 70%;
  left: 19%;
  border-radius: 999px;
  rotate: 10deg;
}

. .left div:nth-child(6) {
  height: 2px;
  width: 15px;
  top: 84%;
  left: 10%;
  border-radius: 999px;
}

. .right::before,
. .right::after {
  right: 0;
  top: 0;
}

. .right::before {
  background-color: var(--black);
  clip-path: polygon(32% 5%, 85% 5%, 100% 100%, 5% 100%, 28% 92%, 0% 83%, 25% 78%, 0% 66%, 25% 60%, 0% 51%, 18% 46%, 0% 39%, 29% 28%, 0% 17%);
}

. .right::after {
  background-color: var(--white);
  clip-path: polygon(36% 8%, 79% 8%, 94% 97%, 27% 97%, 41% 92%, 13% 83%, 38% 79%, 11% 66%, 38% 61%, 11% 51%, 30% 46%, 10% 39%, 40% 27%, 11% 17%);
}

. .right div {
  position: absolute;
  background-color: var(--black);
  z-index: 6;
}

. .right div:nth-child(1) {
  height: 2px;
  width: 16px;
  top: 15%;
  right: 13%;
  border-radius: 999px;
}

. .right div:nth-child(2) {
  height: 2px;
  width: 17px;
  top: 28%;
  right: 5%;
  border-radius: 999px;
}

. .right div:nth-child(3) {
  height: 2px;
  width: 14px;
  top: 44%;
  right: 12%;
  border-radius: 999px;
}

. .right div:nth-child(4) {
  height: 2px;
  width: 10px;
  top: 56%;
  right: 14%;
  rotate: -8deg;
  border-radius: 999px;
}

. .right div:nth-child(5) {
  height: 2px;
  width: 15px;
  top: 73%;
  right: 9%;
  border-radius: 999px;
}

. .right div:nth-child(6) {
  height: 2px;
  width: 18px;
  top: 88%;
  right: 2%;
  border-radius: 999px;
  rotate: -3deg;
}

CSSで書いたアイコン

元のアイコン

CSSと

仲良くしましょう