CSS transform skew only top side-CodePudding

I got this shape and trying to achieve this in css3, what I tried so far is:

.door {
    width: 150px;
    height: 160px;
    background-image: linear-gradient(180deg, #234dbc, #b84295);
    position: absolute;
    top: 100px;
    border-radius: 5px;
    transform: rotate(17deg) skew(17deg);
    background-size: 200% 200%;
    animation: Animation 5s ease infinite;
}

@keyframes Animation { 
    0%{background-position:10% 0%}
    50%{background-position:90% 100%}
    100%{background-position:10% 0%}
}

<div ></div>

But I couldn't handle this with skew any idea or solution?

CodePudding user response：

You are almost there. Consider a pseudo element to be able to hide the bottom part using overflow:hidden

.door {
  width: 100px;
  height: 160px;
  display: grid;
  border-radius: 10px;
  overflow:hidden;    
  transform-origin: bottom;
  transform: skewX(-4deg);
}
.door:before {
  content:"";
  background-image: linear-gradient(180deg, #234dbc, #b84295);
  border-radius: inherit;
  transform: skewY(17deg);
  transform-origin: bottom left;
  background-size: 200% 200%;
  animation: Animation 5s ease infinite;
}

@keyframes Animation {
  50% {
    background-position: 90% 100%
  }
}

<div ></div>

CodePudding user response：

Always :before solve the problem

.door {
  width: 100px;
  height: 160px;
  background-image: linear-gradient(180deg, #234dbc, #b84295);
  position: absolute;
  top: 100px;
  border-radius: 5px;
  background-size: 200% 200%;
  animation: Animation 5s ease infinite;
  overflow: hidden;
  transform: skewX(-2deg)
}
.door::before {
  content: "";
  position: absolute;
  width: 150px;
  height: 52px;
  background: rgb(248, 248, 248);
  top: -30px;
  left: 0px;
  transform: skewY(18deg);
}

<div ></div>

You should make the :before background like the background of the area to seem like it's transparent

For that i make the background color of the :before rgb(248, 248, 248)