Как сделать углы, как это, используя CSS?

Question

Вот изображение того, о чем я говорю:

Есть ли способ получить такие углы, используя css3, или мне приходится прибегать к изображениям? Мне кажется, я где-то видел учебник по этому вопросу, но, похоже, не могу его найти.

Answer 1

Вы имеете в виду что-то вроде этой демонстрационной скрипки ?

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 не поддерживаются, см. эту исправленную скрипку .

Answer 2

Мне очень повезло с JQuery Corners:

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

Он может делать наклонные углы, как и многие другие варианты, и хорошо работает в старых браузерах:

Answer 3

[ВАЖНО] Используйте этот подход, если вы действительно хотите придерживаться 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>

Есть идея? каждый из этих элементов представляет собой одну строку, линейно отступающую назад для формирования «угла». а над ними верхняя сплошная линия.

Answer 4

Если вы не боитесь CSS3, погрузитесь в border-images или несколько фонов .Это и CSS, и изображения.

Answer 5

Вы можете сделать закругленные углы (например, на 28 / как на изображении) с помощью CSS, но углы, вырезанные так же, как и в верхней части контейнера, требуют изображений.

Answer 6

Эта библиотека JavaScript

Кросс-браузер простота!В любом случае, зачем использовать CSS ...