DEV Community

Cover image for CSSBattle | #15 Overlap
Nazmuz Shakib Pranto
Nazmuz Shakib Pranto

Posted on

3 1

CSSBattle | #15 Overlap

Welcome to CSSBattle Challenges!

In this short article, I go through my solution for CSSBattle - #15 Overlap challenge. Please refer to the code snippet below to get a better insight into my thought processes and the implementation detail.


Challenge:

Overlap Challenge


Solution:

<div class="container">
  <div class="circle left"></div>
  <div class="circle right">
    <div class="hidden-circle"></div>
  </div>
</div>

<style>
  * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }
  .container {
    width: 100%;
    height: 100%;
    background: #09042A;
    position: relative;
  }
  .circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150px;
    height: 150px;
    border-radius: 50%;
  }
  .left {
    background: #7B3F61;
    transform: translate(calc(-50% + -50px), -50%)
  }
  .right {
    background: #E78481;
    transform: translate(calc(-50% + 50px), -50%);
    overflow: hidden;
  }
  .hidden-circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: #09042A;
    transform: translateX(-100px);
  }
</style>
Enter fullscreen mode Exit fullscreen mode

Key Takeaway(s):

  • use overflow hidden to adjust shape of parent element

As always, I welcome any feedback or questions regarding the implementation detail of the challenge. Otherwise, I hope this was useful!

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (1)

Collapse
 
joaaoneto profile image
joaaoneto • Edited

body{
margin: 75 75;
background: #09042A;
}
div {
width: 150;
height: 150;
background: radial-gradient(circle at 120% , #09042A 78px, #7B3F61 10px);
border-radius: 100%;
box-shadow: 100px 0 #E78481
}

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay