第 4 期(2019-05-11)：CSS 菱形剪切

@liwenkang

来源：原创题
难度：★

使用纯 CSS 将下面的图片进行菱形剪切。

注：图片不允许拉伸、挤压。实现代码越简单越好。

<!-- html -->
<img src="https://fezaoduke.github.io/fe-practice-hard/assets/pics/cartoon.png">

/* css */
img {
  /* 你的代码 */
}

参考效果图：

本期优秀回答者： @liwenkang

img{
    /* polygon 中的参数是多边形的顶点 */
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

Navigation Menu