CSS 전투: #14 - 웹 메이커 로고
문제
CSS 속성만 사용하여 다음 컨테이너를 만들어야 합니다.
해결책
이제 솔루션과 이를 달성하는 방법을 살펴보십시오.
HTML
<div wl><p l></div>
<div wr><p r>
<div wl>
: 왼쪽 다각형의 래퍼<div wr>
: 오른쪽 다각형용 래퍼<p l>
: 왼쪽 다각형<p r>
: 오른쪽 다각형CSS
이제 컨테이너의 스타일을 지정해 보겠습니다.
body {
margin: 0;
background: #f2f2b6;
display: grid;
place-items: center;
}
p {
position: fixed;
width: 150;
height: 130;
clip-path: polygon(100% 0, 0 0, 50% 100%);
}
[wl] {
filter: drop-shadow(20px 0 #fd4602);
}
[l] {
background: #ff6d00;
left: -140;
top: -6;
}
[wr] {
filter: drop-shadow(20px 0 #ff6d00);
}
[r] {
background: #fd4602;
transform: scaleY(-1);
bottom: -6;
left: -30;
}
box-shadow
에 clip-path
를 추가할 수 없기 때문에 래퍼를 사용하고 있습니다. 그러나 clip-path
를 일부 div
로 래핑한 다음 drop-shadow
를 적용하면 작동합니다. 그것이 내가 여기서 한 일입니다.Note: In CSS Battle you can use
100
instead of100px
. You don't need to definepx
in CSS. However, if you are usingrem
or%
, you need to pass them separately. That's why in the above CSS code there are no units mostly. For more info visit hereMinify the code or CSS by using any CSS Minifier. It helps you to reduce the characters in the code which will increase the score.
축소 버전:
<div wl><p l></div><div wr><p r><style>body{margin:0;background:#F2F2B6;display:grid;place-items:center}p{position:fixed;width:150;height:130;clip-path:polygon(100% 0,0 0,50% 100%)}[wl]{filter:drop-shadow(20px 0 #FD4602)}[l]{left:-140;top:-6;background:#FF6D00}[wr]{filter:drop-shadow(20px 0 #FF6D00)}[r]{background:#FD4602;bottom:-6;left:-30;transform:scaleY(-1)}
마무리
이를 해결하는 방법에는 여러 가지가 있습니다. 댓글에서 접근 방식을 공유할 수 있습니다. 당신이 이것을 좋아한다면 그것을 ❤️하는 것을 잊지 마십시오. 그리고 다음 글에서 뵙겠습니다. 곧 봐요.
Reference
이 문제에 관하여(CSS 전투: #14 - 웹 메이커 로고), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/j471n/css-battle-14-web-maker-logo-2b1a텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)