Как исправить выход блока за пределы родительского?

#html #css

Есть блок, который сделан по виду как тень для кнопки, но он выходит за пределы самого
большого блока. Подскажите пожалуйста, как это исправить?

Верстка: 



div#login {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  height: 100%;
  background: #b8c783;
}

div#form {
  margin-top: 50px;
}

p#easy_chat {
  font-size: 70px;
  font-family: 'Pacifico';
  color: #fffecd;
}

div#register {
  padding-bottom: 35px;
}

p.name_password {
  font-family: 'Montserrat';
  color: #635960;
}

input.login {
  width: 300px;
  height: 30px;
  background: #fffecd;
  border: none;
  font-family: 'Montserrat';
  color: #635960;
  font-size: 17px;
  padding-left: 10px;
}

div#shadow {
  width: 312px;
  height: 200px;
  background: linear-gradient(-5deg, #b8c783, rgba(0, 0, 0, 0.06));
  transform: matrix(1, -0.13, 0.5, 1.2, 50, 0);
}

input#submit {
  width: 312px;
  height: 40px;
  position: relative;
  background: #635960;
  color: #fffecd;
  font-family: 'Montserrat';
  font-size: 20px;
  border: none;
  z-index: 1;
}

  

    
Easy Chat
    

      

        
Enter your name
        

        
Enter your pasword
        
      
    
    
    

  






    

Ответы

Ответ 1

Попробуйте добавить overflow: hidden; родительскому контейнеру div#login.



div#login {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  height: 100%;
  overflow: hidden;
  background: #b8c783;
}

div#form {
  margin-top: 50px;
}

p#easy_chat {
  font-size: 70px;
  font-family: 'Pacifico';
  color: #fffecd;
}

div#register {
  padding-bottom: 35px;
}

p.name_password {
  font-family: 'Montserrat';
  color: #635960;
}

input.login {
  width: 300px;
  height: 30px;
  background: #fffecd;
  border: none;
  font-family: 'Montserrat';
  color: #635960;
  font-size: 17px;
  padding-left: 10px;
}

div#shadow {
  width: 312px;
  height: 200px;
  background: linear-gradient(-5deg, #b8c783, rgba(0, 0, 0, 0.06));
  transform: matrix(1, -0.13, 0.5, 1.2, 50, 0);
}

input#submit {
  width: 312px;
  height: 40px;
  position: relative;
  background: #635960;
  color: #fffecd;
  font-family: 'Montserrat';
  font-size: 20px;
  border: none;
  z-index: 1;
}

  

    
Easy Chat
    

      

        
Enter your name
        

        
Enter your pasword
        
      
    
    
    

  



Ответ 2

Для своей тени задай css свойство: 

overflow: hidden;