如何在 CSS 中创建有角度的边角 [重复]答案

【问题标题】：How to create an angled corner edge in CSS [duplicate]如何在 CSS 中创建有角度的边角 [重复]
【发布时间】：2014-07-29 11:54:44
【问题描述】：

我的主站点容器遵循一条非常不寻常的路径，我无法弄清楚如何实现它，主要是中间的有角度的部分。

希望我可以通过 CSS 做到这一点，尽管我对其他替代方案持开放态度。我做了很多搜索，找到了一些适用于此的东西，但没有什么特别的。

【问题讨论】：

这个问题似乎跑题了，因为它应该移到wordpress.stackexchange.com
@uthark - 为什么？他们追求的是 CSS 解决方案，我根本看不到对 wordpress 的引用！
原始问题中提到了 Wordpress，但我将其编辑了，因为实际问题与 Wordpress 没有任何关系。
@JonP 最初的问题是 wordpress + 目前尚不清楚该问题是否不涉及 wordpress 的具体 css。

标签： css

【解决方案1】：

给你：http://cssdeck.com/labs/54raksui

.edge{position:relative;background-color:#cccccc;border:1px solid #ffffff;display:inline-block;}
.edge img{display:block;}
.edge:before{content:'';position:absolute;left:-1px;top:-1px;border-top:50px solid #ffffff;border-right:50px solid transparent;}
.edge:after{content:'';position:absolute;left:-2px;top:-2px;border-top:50px solid white;border-right:50px solid transparent;}

<div class="edge">
    <img src="http://placekitten.com/g/500/300" alt="" />
</div>

【讨论】：