CSS배틀 | 25. 꽃

CSSBattle Challenges에 오신 것을 환영합니다!

이 짧은 기사에서는 CSSBattle - #25 Blossom 챌린지에 대한 솔루션을 살펴봅니다. 내 사고 과정과 구현 세부 사항에 대한 더 나은 통찰력을 얻으려면 아래 코드 조각을 참조하십시오.


도전:






해결책:



<div class="container">
  <div class="lg-blossom left"></div>
  <div class="lg-blossom right"></div>
  <div class="sm-blossom left"></div>
  <div class="sm-blossom right"></div>
</div>

<style>
  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }
  .container {
    background: #998235;
    width: 100vw;
    height: 100vh;
    position: relative;
  }
  .lg-blossom {
    position: absolute;
    background: #1a4341;
    width: 100px;
    height: 80px;
    left: 50%;
    top: 50%;
  }
  .lg-blossom.left {
    border-top-left-radius: 50px;
    border-bottom-right-radius: 50px;
    transform: translate(calc(-50% - 50px), calc(-50% - 40px)) rotate(270deg);
  }
  .lg-blossom.right {
    border-top-right-radius: 50px;
    border-bottom-left-radius: 50px;
    transform: translate(calc(-50% + 50px), calc(-50% + 40px)) rotate(270deg);
  }
  .sm-blossom {
    position: absolute;
    background: #f3ac3c;
    width: 80px;
    height: 60px;
    left: 50%;
    top: 50%;
  }
  .sm-blossom.left {
    border-top-right-radius: 50px;
    border-bottom-left-radius: 50px;
    transform: translate(calc(-50% - 50px), calc(-50% + 60px));
  }
  .sm-blossom.right {
    border-top-left-radius: 50px;
    border-bottom-right-radius: 50px;
    transform: translate(calc(-50% + 50px), calc(-50% - 60px));
  }
</style>



주요 내용:

  • using border-radius property to create blossom like shape
  • using both translate and rotate properties to control direction and placement of elements


언제나처럼 챌린지의 구현 세부 사항에 대한 피드백이나 질문을 환영합니다. 그렇지 않으면 이것이 도움이 되었기를 바랍니다!

좋은 웹페이지 즐겨찾기