CSS만으로 일본식 패턴(칠보?)의 배경 패턴을 작성했다
"이것은 이름이란…? 칠보? 검색해도 전혀 나오지 않는다…
style.css
:root {
--white: #fff;
/*円の大きさ*/
--shippo1: calc(var(--shippo2) - 0.6px);
--shippo2: 40px;
--shippo3: calc(var(--shippo2) + 0.6px);
}
.box {
background-color: #9f166a;
background-image:
radial-gradient(circle at top left, transparent var(--shippo1), var(--white) var(--shippo2), transparent var(--shippo3)),
radial-gradient(circle at top right, transparent var(--shippo1), var(--white) var(--shippo2), transparent var(--shippo3)),
radial-gradient(circle at bottom left, transparent var(--shippo1), var(--white) var(--shippo2), transparent var(--shippo3)),
radial-gradient(circle at bottom right, transparent var(--shippo1), var(--white) var(--shippo2), transparent var(--shippo3)),
radial-gradient(circle at 50% 150%, transparent var(--shippo1), var(--white) var(--shippo2), transparent var(--shippo3)),
radial-gradient(circle at 50% -50%, transparent var(--shippo1), var(--white) var(--shippo2), transparent var(--shippo3)),
radial-gradient(circle at -50% 50%, transparent var(--shippo1), var(--white) var(--shippo2), transparent var(--shippo3)),
radial-gradient(circle at 150% 50%, transparent var(--shippo1), var(--white) var(--shippo2), transparent var(--shippo3));
background-size: calc(var(--shippo2) * 1.732) var(--shippo2);
}
결과
참고문헌
radial-gradient() - CSS: 캐스케이딩 스타일시트 | MDN
Reference
이 문제에 관하여(CSS만으로 일본식 패턴(칠보?)의 배경 패턴을 작성했다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/pepepepe_pei/items/2698cd57e501d55e6acd텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
