如何使用css使角像这样成角度？

下面是我所说的图像：

---

有没有一种方法可以使用css3获得这样的角点，或者我必须求助于图像？我相信我在某个地方看到过关于这方面的教程，但我似乎找不到它。

你可以用CSS做圆角（如图中的28/like），但是像容器顶部那样的圆角需要图像。

如果你不害怕CSS3，那么就选择或。它既是css又是图像。

[重要信息]如果你真的想坚持使用css 2.0，那么就采用这种方法

这可能看起来很奇怪，但我在谷歌渲染的页面上看到过！（这是为了四舍五入，但这里可以使用相同的技术）：

。边框线{背景：蓝色；边框：实心3px灰色；边框宽度：0 3px；高度：1px；}

---

明白了吗？这些div中的每一个都是一行，以线性方式向后移动以形成“角度”。上面有一条顶实线。

你是说像这样的东西吗

HTML:

---

缺点：对于IE7，标记中需要额外的span，因为不支持

:after

和

:before

说明符，请参见。

我很幸运地使用了jQuery：

它可以处理斜角和许多其他类型的浏览器，并且在较旧的浏览器中也能很好地工作：

---

跨浏览器的简单性！无论如何，为什么要使用CSS…

你确定那些圆角不是看起来笔直的圆角，因为圆角量太小了吗？如果圆角量太小，你就看不到任何东西。从技术上讲，你可以用一种类似于老式圆角黑客（许多小的分层div）的方式来进行这种圆角切割，但我不想让任何人走那条路。

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

.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;
}