Угол наклона на поле CSS

Question

Я играл с CSS только в течение короткого времени и пытаюсь получить нормальную коробку, но с верхним левым углом, отрезанным под углом 45 градусов. Не маленькое количество также; Я смотрю на довольно большой угол среза под этим углом. Этот эффект:

Как мне это сделать?

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

Answer 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

Answer 3

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>

Answer 4

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

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

Форма, которую мы предоставляем, может быть одной из следующих: inset (), circle (), ellipse () или polygon ().

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

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

1) Скопируйте и вставьте opera: // flags / # enable-экспериментальный-веб-платформа-функции в адресную строку, затем нажмите ввод.

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

Для построения многоугольника - я использовал этот сайт

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

Answer 5

Мне удалось сделать что-то очень похожее, используя только дополнительные пролеты, и эффект сделан с помощью 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;
        }

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

Answer 6

Я предложил адаптивное решение Ray Toal Fiddle: http://jsfiddle.net/duk3/hCaXv/

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

Надеждаэто помогает!