CSS 전투: #12 - 흔들리는 콧수염

이 기사에서는 Wiggly Moustache에 대한 CSS Battle CSS 과제를 해결합니다. 먼저 문제를 살펴보자.

문제

CSS 속성만 사용하여 다음 컨테이너를 만들어야 합니다.

해결책

이제 솔루션과 이를 달성하는 방법을 살펴보십시오.

HTML

<p l>
<p m>  
<p r>  
<p d>  

<p l> : 왼쪽 반원용

<p m> : 센터반원용

<p r> : 오른쪽 반원용

<p d> : 원형 점용

CSS

이제 컨테이너의 스타일을 지정해 보겠습니다.

body {
  margin: 0;
  background: #f5d6b4;
}
p {
  position: fixed;
}

[l], [m], [r] {
  width: 60;
  height: 30;
  border: 20px solid #d86f45;
  border-radius: 0 0 1in 1in;
  border-top: 0;
  bottom: 85;
}
[l] { left: 70 }
[r] { right: 70 }
[m] {
  transform: scaleY(-1);
  bottom: 135;
  left: 150;
}
[d] {
  width: 20;
  height: 20;
  background: #d86f45;
  border-radius: 1in;
  left: 70;
  bottom: 124;
  box-shadow: 240px 0 #d86f45;
}

Note: In CSS Battle you can use 100 instead of 100px. You don't need to define px in CSS. However, if you are using rem or %, you need to pass them separately. That's why in the above CSS code there are no units mostly. For more info visit here

Minify the code or CSS by using any CSS Minifier. It helps you to reduce the characters in the code which will increase the score.

축소 버전:

<p l><p m><p r><p d><style>body{margin:0;background:#F5D6B4}p{position:fixed}[l],[m],[r]{width:60;height:30;border:20px solid #D86F45;border-radius:0 0 1in 1in;border-top:0;bottom:85}[l]{left:70}[r]{right:70}[m]{transform:scaleY(-1);bottom:135;left:150}[d]{width:20;height:20;background:#D86F45;border-radius:1in;left:70;bottom:124;box-shadow:240px 0 #D86F45}

마무리

이를 해결하는 방법에는 여러 가지가 있습니다. 댓글에서 접근 방식을 공유할 수 있습니다. 당신이 이것을 좋아한다면 그것을 ❤️하는 것을 잊지 마십시오. 그리고 다음 글에서 뵙겠습니다. 곧 봐요.