我想知道是否有任何方法用纯CSS创建这个形状。为了进一步扩展这个问题，这个形状需要将图像夹在里面(把它看成一个掩码 – 但是灰色边框必须是可见的)。
或者我最好在canvas / svg中创建这个？
解决方法
保持边界有点困难，但是我设法使用以下方法实现了一个紧密的效果：before和：在具有父容器的元素之后：(之前和之后不在img标签上工作)
>向容器添加边框
>添加一个以阻止一个角和偏移-1以覆盖边框
>添加一个以后，稍微偏离前面创建的行内切断
如您所见，45度线的厚度有一点问题：
.cutCorner {
position:relative; background-color:blue;
border:1px solid silver; display: inline-block;
}
.cutCorner img {
display:block;
}
.cutCorner:before {
position:absolute; left:-1px; top:-1px; content:'';
border-top: 70px solid silver;
border-right: 70px solid transparent;
}
.cutCorner:after {
position:absolute; left:-2px; top:-2px; content:'';
border-top: 70px solid white;
border-right: 70px solid transparent;
}
<div class="cutCorner">
<img class="" src="https://www.google.co.uk/logos/doodles/2013/william-john-swainsons-224th-birthday-5655612935372800-hp.jpg" />
</div>
