css如何剪切元素??clip属性的使用

.container {

  margin: 40px auto;

  width: 300px;

  position: relative;

}

.element {

  width: 300px;

  height: 300px;

  z-index: 0;

  position: absolute;

  -webkit-transition: clip .4s ease-in-out, z-index .2s linear .4s;

  transition: clip .4s ease-in-out, z-index .2s linear .4s;

}

img {

  max-width: 100%;

}

.element-1 {

  background-color: #2c3e50;

  clip: rect(0px, 150px, 150px, 0px);

}

.element-2 {

  background-color: #f39c12;

  clip: rect(0px, 300px, 150px, 150px);

}

.element-3 {

  background-color: #16a085;

  clip: rect(150px, 150px, 300px, 0px);

}

.element-4 {

  background-color: #8e44ad;

  clip: rect(150px, 300px, 300px, 150px);

}

.element:hover {

  z-index: 1;

  -webkit-transition: clip .4s ease-in-out .2s, z-index .2s linear;

  transition: clip .4s ease-in-out .2s, z-index .2s linear;

  clip: rect(0px, 300px, 300px, 0px);

}