如何在CSS中创建一个有角度的角边

Question

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

希望我能通过CSS做到这一点，尽管我可以接受其他选择。我做了很多搜索，发现了一些有点适用于此的内容，但没有具体说明。

Answer 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>