CSS Battle#7 - 녹색 리프 내경
목표
관찰 목표
위쪽과 아래쪽의 경계 반지름이 1인 3개의 사각형 형태
거의 가운데에 있는 그림(상단과 왼쪽을 완전히 배치하고 중심에 놓을 수 있음을 의미함)
형태는 거리 뒤에 겹친다
조심스러운 방법은 수동으로 값을 입력하는 것이 아니라 모양의 크기를 추측하는 것이다.우선, 우리는 해결 방안의 크기와 코드를 추측한다
솔루션
이상의 관찰 결과를 결합하면 우리는 코드가 아래의 코드와 유사하다는 것을 알 수 있다
<div> </div>
<div> </div>
<div> </div>
<style>
body {
background: #0B2429;
}
div {
left: 50%;
top: 50% ;
height: 150;
width: 150;
border-radius: 100px 0 100px 0;
position: absolute;
}
div:nth-child(1) {
background: #1A4341;
transform: translate(-125px, -75px);
}
div:nth-child(2) {
transform: translate(-75px, -75px);
background: #998235;
}
div:nth-child(3) {
transform: translate(-25px, -75px);
background: #F3AC3C;
}
</style>
자신이 목표를 달성하는 데 얼마나 많은 시간을 들였는지 댓글에 꼭 알려주세요.
Reference
이 문제에 관하여(CSS Battle#7 - 녹색 리프 내경), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/chetan11dev/leafy-trail-115p
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
위쪽과 아래쪽의 경계 반지름이 1인 3개의 사각형 형태
거의 가운데에 있는 그림(상단과 왼쪽을 완전히 배치하고 중심에 놓을 수 있음을 의미함)
형태는 거리 뒤에 겹친다
조심스러운 방법은 수동으로 값을 입력하는 것이 아니라 모양의 크기를 추측하는 것이다.우선, 우리는 해결 방안의 크기와 코드를 추측한다
솔루션
이상의 관찰 결과를 결합하면 우리는 코드가 아래의 코드와 유사하다는 것을 알 수 있다
<div> </div>
<div> </div>
<div> </div>
<style>
body {
background: #0B2429;
}
div {
left: 50%;
top: 50% ;
height: 150;
width: 150;
border-radius: 100px 0 100px 0;
position: absolute;
}
div:nth-child(1) {
background: #1A4341;
transform: translate(-125px, -75px);
}
div:nth-child(2) {
transform: translate(-75px, -75px);
background: #998235;
}
div:nth-child(3) {
transform: translate(-25px, -75px);
background: #F3AC3C;
}
</style>
자신이 목표를 달성하는 데 얼마나 많은 시간을 들였는지 댓글에 꼭 알려주세요.
Reference
이 문제에 관하여(CSS Battle#7 - 녹색 리프 내경), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/chetan11dev/leafy-trail-115p
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<div> </div>
<div> </div>
<div> </div>
<style>
body {
background: #0B2429;
}
div {
left: 50%;
top: 50% ;
height: 150;
width: 150;
border-radius: 100px 0 100px 0;
position: absolute;
}
div:nth-child(1) {
background: #1A4341;
transform: translate(-125px, -75px);
}
div:nth-child(2) {
transform: translate(-75px, -75px);
background: #998235;
}
div:nth-child(3) {
transform: translate(-25px, -75px);
background: #F3AC3C;
}
</style>
Reference
이 문제에 관하여(CSS Battle#7 - 녹색 리프 내경), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/chetan11dev/leafy-trail-115p텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)