css | clip-path做菱形可太方便

css中的clip-path实现一个菱形效果太赞了

html

<div class="box">
  <div class="picture">
    <img src="https://s.cdpn.io/profiles/user/3483322/80.jpg?1576146770">
  </div>
</div>

css

.box {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
// .picture {
//   width: 200px;
//   transform: rotate(45deg);
//   overflow: hidden;
 
// }
// .picture > img {
//   width: 100%;
//   transform: rotate(-45deg) scale(1.47);
// }
img {
  width: 100px;
  clip-path: polygon(50% 0,100% 50%, 50% 100%,0 50%);
  transition: 1s clip-path;
}

img:hover {
  clip-path: polygon(0 0,100% 0,100% 100%,0 100%);
}