使用css如何使角落成角度?

前端之家收集整理的这篇文章主要介绍了使用css如何使角落成角度?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
这是我在说什么的形象:

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

解决方法

你的意思是像 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,您需要在标记添加额外的span,因为:after和:在不支持说明符之前,请参阅this revised fiddle

原文链接:https://www.f2er.com/css/218245.html

猜你在找的CSS相关文章