如何使用css使角落像这样？

Question

这是我正在谈论的图像：

有没有办法使用css3来获得这样的角落，还是我必须诉诸图像？我相信我在某个地方看过这个教程，但我似乎无法找到它。

Answer 1

您的意思是 this demo fiddle 吗？

HTML：

<div class="box">
    <div class="head">
        <div class="like"></div>
        <h3>User927</h3>
    </div>
    <div class="cont">
        <p>Lorem ipsum...</p>
    </div>
    <div class="foot">
        <a href="">More</a>
    </div>   
</div>

CSS：

.box {
    width: 310px;
    position: relative;
}
.head {
    background: black;
    color: white;
}
.cont {
    border-left: 1px solid silver;
    border-right: 1px solid silver;
}
.foot {
    background: lightgray;
    border: 1px solid silver;
    border-bottom-width: 3px;
}
.head:before,
.head:after,
.foot:before,
.foot:after {
    font-size: 0px; 
    content: ".";
    position: absolute;    
}
.head:before {
    border-top: 5px solid white;
    border-right: 5px solid black;
    left: 0;
    top: 0;
}
.head:after {
    border-top: 5px solid white;
    border-left: 5px solid black;
    right: 0;
    top: 0;
}
.foot:before {
    border-bottom: 7px solid white;
    border-right: 7px solid transparent;
    left: 0;
    bottom: 0;
}
.foot:after {
    border-bottom: 7px solid white;
    border-left: 7px solid transparent;
    right: 0;
    bottom: 0;
}

下行：对于IE7，您需要在标记中添加额外的跨度，因为不支持:after和:before说明符，请参阅this revised fiddle。

Answer 2

我对jQuery Corners非常幸运：

http://malsup.com/jquery/corner/

它可以做斜角以及许多其他变种，并且在旧版浏览器中也能很好地工作：

Answer 3

您可以使用CSS执行圆角角（例如图像中的28 /像），但是像容器顶部那样的角切割需要图像。

Answer 4

如果你不害怕CSS3，那么请深入研究border-images或multiple backgrounds。它既是CSS又是图像。

Answer 5

[重要]如果您真的想坚持使用CSS 2.0，请选择此方法。

这可能看起来很奇怪，但我在Google渲染页面中看到了这一点！ （这是为了舍入，但这里可以使用相同的技术）：

.border-line {background:blue; border:solid 3px gray; border-width: 0 3px; height:1px;}

<div class='top-border-line'></div>
<div class='border-line' style='margin:0 5px;'></div>
<div class='border-line' style='margin:0 4px;'></div>
<div class='border-line' style='margin:0 3px;'></div>
<div class='border-line' style='margin:0 2px;'></div>
<div class='border-line' style='margin:0 1px;'></div>

知道了吗？这些div中的每一个都是一行单行向后线性地形成“角度”。并且它们上方有一条顶部实线。

Answer 6

This javascript library

跨浏览器简单！为什么还要使用CSS ...