我如何使角落像这样使用css？ [英] How do I make corners angled like this using css?

问题描述

以下是我所说的图片：

有没有办法得到这样的角落使用css3或者我必须诉诸图像？我相信我在这里看到一个教程，但我似乎找不到它。

解决方案

strong> 。

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.

解决方案

Do you mean something like 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;
}

Downside: for IE7 you would need extra span's in the markup because the :after and :before specifiers are not supported, see this revised fiddle.

这篇关于我如何使角落像这样使用css？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！