CSS 如何使用css使角像这样倾斜？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6474168/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I make corners angled like this using css?
提问by J82
Here is an image of what I'm talking about:
这是我正在谈论的图像：
Is there a way to get the corners like this using css3 or do I have to resort to images? I believe I saw a tutorial on this somewhere but I can't seem to find it.
有没有办法使用css3获得这样的角落，或者我必须求助于图像？我相信我在某处看到了一个关于这个的教程，但我似乎找不到它。
回答by NGLN
Do you mean something like this demo fiddle?
你的意思是像这个演示小提琴吗？
HTML:
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:
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;
}
Downside: for IE7 you would need extra span's in the markup because the :afterand :beforespecifiers are not supported, see this revised fiddle.
缺点：对于 IE7，您需要在标记中使用额外的跨度，因为不支持:after和:before说明符，请参阅此修订后的 fiddle。
回答by Seth
I've had great luck with jQuery Corners:
我在 jQuery Corners 上很幸运：
http://malsup.com/jquery/corner/
http://malsup.com/jquery/corner/
It can do slanted corners as well as many other varieties, and works well in older browsers too:
它可以做斜角以及许多其他变体，并且在旧浏览器中也能很好地工作：
回答by Adam Hopkinson
You can do roundedcorners (such as on the 28/like in the image) with CSS, but corners cut like those at the top of the container require images.
您可以使用 CSS 制作圆角（例如图像中的 28/like），但是像容器顶部的那些切角需要图像。
回答by Levi Morrison
If you aren't afraid of CSS3, then dive into either border-imagesor multiple backgrounds. It's both css and images.
如果你不害怕 CSS3，那么深入研究border-images或multiple backgrounds。它是 css 和图像。
回答by Mo Valipour
[IMPORTANT] Go for this approach if you really want to stick to CSS 2.0.
[重要] 如果您真的想坚持使用 CSS 2.0，请采用这种方法。
It may seem weird, but I have seen this in Google rendered pages! (that was for rounding but the same technique can be used here):
这可能看起来很奇怪，但我在谷歌渲染的页面中看到过这个！（这是为了四舍五入，但这里可以使用相同的技术）：
.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>
Got the idea? each of those divs are one single row steping backward linearly to form the "angle". and there is a top solid line above them.
明白了吗？这些 div 中的每一个都是一行线性向后步进以形成“角度”。它们上方有一条顶部实线。
回答by Gga
Cross browser simplicity! Why use CSS anyway...
跨浏览器简单！为什么要使用 CSS...
