Ответ 1

Описание

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 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

Ответ 2

Это можно сделать, используя svg clip-path.

<сильные > Преимущества:

• Работа с регулярным div
• Нет хакерских границ для создания фигур
• Не применяйте какое-либо вращение, чтобы вы могли легко сделать это на неравномерном фоне.
• Не добавляет какой-либо элемент 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

Ответ 3

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

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

Форма, которую мы предоставляем, может быть одной из вложений(), круга(), эллипса() или полигона().

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

Чтобы включить режим Shape, Regions и Blend:

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

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;
}

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

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

Ответ 4

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>

Ответ 5

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

html:

<div class="outer">
<div class="cornered">It 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>

css:

.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;
}

Надеюсь, что это поможет!

Ответ 6

Мне удалось сделать что-то очень похожее, используя только дополнительные промежутки, и эффект выполняется через 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;" цвет - это тот, который должен отличаться от цвета фона основного родителя, чтобы создать контраст по диагонали/ angular.