Описания

Slantastic (http://meyerweb.com/eric/css/edge/slantastic/demo.html) поддерживает старые браузеры. Для CSS3 попробуйте многоугольники CSS: http://alastairc.ac/2007/02/dissecting-css-polygons/.

Код

HTML:

<div class="cornered"></div>
<div class="main">Hello</div>

CSS:

.cornered {
    width: 160px;
    height: 0px;
    border-bottom: 40px solid red;
    border-right: 40px solid white;
}
.main {
    width: 200px;
    height: 200px;
    background-color: red;
}

Результат: http://jsfiddle.net/mdQzH/

Альтернативный код

Чтобы использовать прозрачные границы и текст в разделе границ ... HTML:

<div class="outer">
<div class="cornered">It's possible to put text up here, too
    but if you want it to follow the slant you have to stack
    several of these.</div>
<div class="main">Hello hello hello hello
hello hello hello hello hello</div>
</div>

CSS:

.outer {
    background-color: #ccffff;
    padding: 10px;
    font-size: x-small;
}
.cornered {
    width: 176px;
    height: 0px;
    border-bottom: 40px solid red;
    border-left: 40px solid transparent;
}
.main {
    width: 200px;
    height: 200px;
    background-color: red;
    padding: 0 8px;
}

Результат: http://jsfiddle.net/76EUw/2

Это можно сделать с помощью svg clip-path.

Преимущества:

1. Работа с обычным div
2. Никаких хитрых границ для создания фигур
3. Не применяйте вращение, чтобы можно было легко сделать это на неоднородном фоне.
4. Не добавляет никаких элементов div через CSS, чтобы вы могли работать с обычным фоном div (например, если у вас есть код, изменяющий его!)

Следующий CSS будет формировать div с обрезанным нижним правым углом, чтобы вы могли разместить любой фон:

-webkit-clip-path: polygon(100% 0, 100% 65%, 54% 100%, 0 100%, 0 0);
clip-path: polygon(100% 0, 100% 65%, 54% 100%, 0 100%, 0 0);

В сети есть несколько генераторов SVG:

• http://bennettfeely.com/clippy/
• http://cssplant.com/clip-path-generator

Поддержка:

• Firefox: 3.5+
• Chrome: 24+
• Safari: 7+
• Опера: 15+
• Край: 76+
• IE: нет

Проверьте https://caniuse.com/#feat=css-clip-path

CSS3 linear-gradient() может рисовать этот фон.

background: linear-gradient(to bottom right, transparent 50px, blue 50px);

body {
  background: linear-gradient(red, orange) no-repeat;
  min-height: 100vh;
  margin: 0;
}
div {
  background: linear-gradient(to bottom right, transparent 50px, blue 50px);
  margin: 25px auto;
  padding: 50px;
  height: 200px;
  width: 200px;
  color: white;
}

<div>
  Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... 
</div>

В ближайшем будущем вы сможете добиться этого с помощью модуля CSS Shapes.

С помощью свойства shape-inside мы можем сделать текст плавным в соответствии с формой.

Предоставляемая нами форма может быть одной из inset (), circle (), ellipse () или polygon ().

В настоящее время это можно сделать в браузерах webkit, но сначала вы должны сделать следующее: (инструкции из веб-платформы)

Чтобы включить фигуры, области и режимы наложения:

1) Скопируйте и вставьте opera: // flags / # enable-experimental-web-platform-features в адресную строку, затем нажмите Enter.

2) Щелкните ссылку «Включить» в этом разделе.

3) Нажмите кнопку «Перезапустить сейчас» в нижней части окна браузера.

Если вы это сделали - тогда ознакомьтесь с этой FIDDLE.

что выглядит так:

<div class="shape">
     Text here
</div>

CSS

.shape{
  -webkit-shape-inside: polygon(65px 200px,65px 800px,350px 800px,350px 80px,160px 80px);
  shape-inside: polygon(65px 200px,65px 450px,350px 450px,350px 80px,160px 80px);
  text-align: justify;
}

Чтобы построить форму многоугольника, я использовал этот сайт

Дополнительную информацию о различных поддерживаемых свойствах можно найти здесь

Я придумал отзывчивое и дружелюбное решение скрипки Рэя Тоала: http://jsfiddle.net/duk3/hCaXv/ < / а>

<div class="outer">
<div class="cornered">It's possible to put text up here, too
    but if you want it to follow the slant you have to stack
    several of these.</div>
<div class="main">Hello llo hello llo hello hello hello llo hello hello hello hello hello hello hello hello</div>
</div>

.outer {
    background-color: #ccffff;
    padding: 10px;
    font-size: x-small;
}
.cornered {
    width: 100%;
    box-sizing:border-box;
    height: 0px;
    border-bottom: 2em solid red;
    border-left: 2em solid transparent;
    border-right: 2em solid transparent;
}
.main {
    background-color: red;
    padding: 0 2em;
}

Мне удалось сделать что-то очень похожее, используя только дополнительные промежутки, а эффект достигается через CSS.

jsFiddle для иллюстрации.

HTML
<div class="more-videos"> <a href=""><span class="text">More videos</span><span class="corner"></span></a> </div>

CSS

`.more-videos {
     padding: 20px;
 }

    .more-videos a {
        text-decoration: none;
        background-color: #7f7f7f;
        position: relative;
        padding: 10px 10px 5px 15px;
    }

        .more-videos a span {
            font-size: 20px;
            color: #ffffff;
        }

            .more-videos a span.text {
                padding-right: 10px;
            }

            .more-videos a span.corner {
                border-top: 15px solid #7f7f7f;
                border-right: 15px solid #4d4c51;
                border-bottom: none;
                border-left: none;
                bottom: 0px;
                right: 0px;
                position: absolute;
            }

        .more-videos a:hover span.corner {
            border-right: 15px solid #999999;
        }

Я включил стиль наведения, запускаемый от родителя. Поле 'border-right: 15px solid # 4d4c51;' цвет - это тот, который должен отличаться от цвета фона родительского якоря, чтобы создать диагональный / угловой контраст.