是否可以在 CSS 中创建斜角？

Question

我想知道是否有任何方法可以用纯 CSS 创建这个形状。为了进一步扩展这个问题，这个形状需要在里面裁剪图像（把它想象成一个蒙版——但是灰色的边框必须是可见的）。

还是我最好在画布/svg 中创建它？

原文由 user2307706 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

保持边界有点困难，但我设法使用带有父容器的 :before 和 :after 元素实现了关闭效果（:before 和 :after 不适用于 img 标签）

1. 为容器添加边框

2. 添加一个 before 以遮挡一个角并偏移 -1 以覆盖边框

3. 添加一个与之前略有偏移的之后，以在切断内创建线条

如您所见，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

原文由 Matt.C 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

查看演示

您可以使用伪以及 border-width 和 border-color 来完成此操作，请参阅下面的代码以了解如何完成。

HTML

 <div class="cut"></div>

CSS

 .cut {
    position:relative;
    width:500px;
    height: 200px;
    padding:20px;
    color:#000;
    background:#ccc;
}

.cut:before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    border-width:30px 30px 0px 0px;
    border-style:solid;
    border-color:#fff transparent transparent #fff ;
}

另一个解决方案使用这个 jQuery 脚本来支持跨浏览器。 –> http://jquery.malsup.com/corner/

在这里查看演示

HTML

 <div class="cut"></div>

CSS

 .cut {
    position:relative;
    width:500px;
    height: 200px;
    padding:20px;
    color:#000;
    background:#ccc;
}

JS

 $(".cut").corner("bevel tl 50px");

原文由 Vikas Ghodke 发布，翻译遵循 CC BY-SA 3.0 许可协议