是否可以在CSS中创建一个有角度的角？

我想知道是否有任何方法用纯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>

JSFiddle

原文地址：https://www.jb51.cc/css/219935.html