Подтвердить что ты не робот

Как сделать углы такими, как css?

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

corners

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

4b9b3361

ОТВЕТЫ

Ответ 1

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

Angled corners

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

Ответ 2

Мне повезло с jQuery Corners:

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

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

Ответ 3

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

Ответ 5

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

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