Cut-out Container

    0

    1

    Edward-Radical

    The code will create a cut-out container that is 200px wide and 250px tall. The container will have an absolute position at the bottom left corner of the screen and will be translated 50% to the left and 50% down. The background will be a light blue and the border will be 100% rounded. The shadow will be a darker blue and will be 8.3vw * 30 pixels wide and 30 pixels tall.

    .cut-out-container{
      overflow: hidden;
      position: relative;
      z-index: 2;
    
      width: 200px;
      height: 250px;
      
      &::after {
        content: "";
        position: absolute;
        z-index: -1;
        top: 0;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 35px;
        height: 35px;
        border-radius: 100%;
        box-shadow: 0px 0px 0px calc(8.3vw * 30) #fff;
      }
    }
    Codiga Logo
    Codiga Hub
    • Rulesets
    • Playground
    • Snippets
    • Cookbooks
    soc-2 icon

    We are SOC-2 Compliance Certified

    G2 high performer medal

    Codiga – All rights reserved 2022.