CSS только пересекает углы браузера?

Question

У кого-нибудь есть современный метод CSS для выполнения чего-то подобного?Я искал целую вечность.Может быть, я использую неправильные условия поиска?

http://fu2k.org/alex/css/equalheight/divs/clipped

ОБНОВЛЕНИЕ:

Спасибо всем за ответы и комментарии.К сожалению, фон моего div имеет шаблон и имеет тонкую сплошную границу, так что, похоже, это исключает множество предложений.Я все еще изучаю идеи.Возможно, возможен подход на основе JavaScript?

Answer 1

Этого можно добиться с помощью чистого CSS - кроссплатформенного, вплоть до IE7 (я не проверял это с IE6, но думаю, что он все еще должен работать).

<style type="text/css">
<!--
div.big {
    position: relative;
    width: 600px;
    height: 200px;
    background:#FFF url(images/pattern.png)
    border: solid 1px black;
}

div.top-left-b {
    width: 0;
    height: 0;
    position: absolute;
    top: 0px;
    left: 0px;
    border-top: solid 40px black;
    border-right: solid 40px transparent;
    z-index: 1;
}

div.top-left-w {
    width: 0;
    height: 0;
    position: absolute;
    top: -1px;
    left: -1px;
    border-top: solid 40px white;
    border-right: solid 40px transparent;
    z-index: 2;
}

div.top-right-b {
    width: 0;
    height: 0;
    position: absolute;
    top: 0px;
    right: 0px;
    border-top: solid 40px black;
    border-left: solid 40px transparent;
    z-index: 1;
}

div.top-right-w {
    width: 0;
    height: 0;
    position: absolute;
    top: -1px;
    right: -1px;
    border-top: solid 40px white;
    border-left: solid 40px transparent;
    z-index: 2;
}

div.bottom-left-b {
    width: 0;
    height: 0;
    position: absolute;
    bottom: 0px;
    left: 0px;
    border-bottom: solid 40px black;
    border-right: solid 40px transparent;
    z-index: 1;
}

div.bottom-left-w {
    width: 0;
    height: 0;
    position: absolute;
    bottom: -1px;
    left: -1px;
    border-bottom: solid 40px white;
    border-right: solid 40px transparent;
    z-index: 2;
}

div.bottom-right-b {
    width: 0;
    height: 0;
    position: absolute;
    bottom: 0px;
    right: 0px;
    border-bottom: solid 40px black;
    border-left: solid 40px transparent;
    z-index: 1;
}

div.bottom-right-w {
    width: 0;
    height: 0;
    position: absolute;
    bottom: -1px;
    right: -1px;
    border-bottom: solid 40px white;
    border-left: solid 40px transparent;
    z-index: 2;
}
-->
</style>

<div class="big">
    <div class="top-left-b"><!-- --></div>
    <div class="top-left-w"><!-- --></div>
    <div class="top-right-b"><!-- --></div>
    <div class="top-right-w"><!-- --></div>
    <div class="bottom-left-b"><!-- --></div>
    <div class="bottom-left-w"><!-- --></div>
    <div class="bottom-right-b"><!-- --></div>
    <div class="bottom-right-w"><!-- --></div>
</div>

Это приведет кследующий эффект:

Answer 2

Для закругленных углов вы можете использовать border-radius (с префиксами вендора и без них).

Если вы действительно хотите такой же внешний вид, как на изображении вопроса,Вы можете использовать два контейнера и применить CSS- transform (с и без префиксов вендоров) + overflow:hidden, чтобы получить желаемый вид.

Откат имеетдля использования в старых браузерах, которые не поддерживают эти методы, с использованием прозрачного фонового изображения.

Демонстрация + дальнейшее объяснение логики по адресу: http://jsfiddle.net/7upkc/1/

HTML:

<div class="outer-clipped-box">
    <div class="inner-clipped-box">
        <div class="content-clipped-box">
            Content here.
        </div>
    </div>
</div>

CSS (префикс конкретного поставщика для поддержки кроссбраузера, в данном случае игнорируется Opera и IE):

.outer-clipped-box {
    height: 200px;
    width: 200px;
    overflow: hidden;
}
.inner-clipped-box {
    height: 250px;
    width: 250px;
    background: #ddf;

    -moz-transform-origin: 140px 84px;
    -moz-transform: rotate(45deg);
    -webkit-transform-origin: 140px 84px;
    -webkit-transform: rotate(45deg);
    transform-origin: 140px 84px;
    transform: rotate(45deg);
}

/* Undo rotation, to get the content in the right position*/
.content-clipped-box {
    height: 150px;
    width: 150px;

    -moz-transform-origin: center center;
    -moz-transform: rotate(-45deg) translate(0,70px);
    -webkit-transform-origin: center center;
    -webkit-transform: rotate(-45deg) translate(0,70px);
    transform-origin: center center;
    transform: rotate(-45deg) translate(0,70px);
}

Answer 3

Для этого нет современных css, только для закругленных углов.Но вы можете нарисовать обрезанные края с границами старой школы.Посмотрите на этот пример http://ago.tanfa.co.uk/css/borders/stacked-cubes.html

Answer 4

Это можно сделать. Google для "диагонального угла CSS" или треугольника, но единственный пример, который я помню, читал использованные уловки. Вот пример треугольника , который вы можете использовать для вставки в угол и установки непрозрачности или чего-то подобного. Но это может иметь лучшую информацию об этом .

РЕДАКТИРОВАТЬ: Даже лучше, чем все, что я должен был упомянуть в первую очередь: сайт Стю Николс.