it-swarm.com.ru

Наклонный угол на поле CSS

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

http://tadesign.net/corner.jpg

Как я должен идти об этом?

20
Mach

Описания

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

20
Ray Toal

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

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

  1. Работа с обычным дивом
  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:

9
JBE

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

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

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

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

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

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

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

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

Если вы это сделали - тогда посмотрите эту СКРИПКУ

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

enter image description here

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

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

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

3
Danield

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>

3
Mohammad Usman

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

1
David Barnett

Я предложил адаптивное решение 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;
}

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

1
Romainpetit