CSS의 힘: div로 그림 그리기

이 그림들은 모두 DIV를 사용하여 그린 것입니다. 사실 원리는 복잡하지 않습니다.

이러한 그림은 CSS로 그려지고 배경 이미지 오버레이를 통해 구현되며,

버섯 머리 등이 구현됩니다. 방사형 그라데이션 방사형 그라데이션과 선형 그라데이션 선형 그라데이션을 중첩하여 구현합니다. 예:

p {
  width: 170px;
  height: 140px;
  background-image:
        radial-gradient(circle at 50% 120%, rgba(0,0,0,0.7) 23%, rgba(0,0,0,0) 48%),
        linear-gradient(30deg, rgba(0,0,0,0.4) 10%, rgba(0,0,0,0) 20%),
        radial-gradient(circle at 50% 33%, #f8f6f7 32%, rgba(255,255,255,0) 32%),
        radial-gradient(circle at -13% 55%, #f8f6f7 20%, rgba(255,255,255,0) 20%),
        radial-gradient(circle at 113% 55%, #f8f6f7 20%, rgba(255,255,255,0) 20%),
        linear-gradient(to bottom, #ef0015 20%, #b2000c 100%);
        border-radius: 140px 140px 80px 80px;
}

동시에 :before 및 배경 이미지를 통해 전면 및 후면 폐색 관계가 있습니다. : 의사 요소를 수행한 후.

온라인 데모: http://jsfiddle.net/ourjs/ed0ayybo/

PS: 이 방법은 IE 이전 버전을 완전히 지원하지 않습니다

원본 주소: http : //a.singlep.com/?utm_source=ourjs.com