Можно ли создать угловой угол в CSS?

Мне интересно, есть ли способ создать эту фигуру с помощью чистого CSS. Чтобы расширить эту проблему дальше, эта форма должна закрепить изображение внутри (подумайте об этом как маску, но серая граница должна быть видимой).

введите описание изображения здесь

Или мне лучше создать это в canvas / svg?

Немного сложно сохранить границу, но мне удалось добиться близкого эффекта, используя: before и: after элементы с родительским контейнером (: before и: after не работают с тегом img)

  1. Добавить границу в контейнер

  2. Добавьте ранее, чтобы заблокировать угол и смещение на -1, чтобы закрыть границу

  3. Добавьте после этого немного смещенный от ранее, чтобы создать линию внутри обрезанного

Как вы можете видеть, толщина линии 45deg немного сложная:

.cutCorner { position:relative; background-color:blue; border:1px solid silver; display: inline-block; } .cutCorner img { display:block; } .cutCorner:before { position:absolute; left:-1px; top:-1px; content:''; border-top: 70px solid silver; border-right: 70px solid transparent; } .cutCorner:after { position:absolute; left:-2px; top:-2px; content:''; border-top: 70px solid white; border-right: 70px solid transparent; } 
 

ВИДЕТЬ ДЕМО

Вы можете сделать это, используя псевдо, наряду с border-width border-color и border-color чтобы увидеть, как это сделать.

HTML

 

CSS

 .cut { position:relative; width:500px; height: 200px; padding:20px; color:#000; background:#ccc; } .cut:before { content:""; position:absolute; top:0; left:0; border-width:30px 30px 0px 0px; border-style:solid; border-color:#fff transparent transparent #fff ; } направо .cut { position:relative; width:500px; height: 200px; padding:20px; color:#000; background:#ccc; } .cut:before { content:""; position:absolute; top:0; left:0; border-width:30px 30px 0px 0px; border-style:solid; border-color:#fff transparent transparent #fff ; } 

Другое решение, использующее этот сценарий jQuery для поддержки кросс-браузера. -> http://jquery.malsup.com/corner/

СМОТРИТЕ ДЕМО ЗДЕСЬ

HTML

 

CSS

 .cut { position:relative; width:500px; height: 200px; padding:20px; color:#000; background:#ccc; } 

JS

 $(".cut").corner("bevel tl 50px"); 

Использование CSS:

Точную форму можно получить с помощью CSS. Идея состоит в том, чтобы иметь элемент с border-radius для верхнего левого угла, перекосить его вдоль оси Y, а затем поместить его непосредственно перед прямоугольником. Выполнение этих действий показало бы, что прямоугольный элемент имеет треугольный разрез сверху с одним изогнутым краем.

Если внутренняя часть формы имеет только цвет (сплошной или прозрачный), то ее можно достичь, используя только один элемент. Однако, если изображение должно быть добавлено внутри фигуры (например, упомянутое в вопросе), нам нужно больше, чем один элемент, потому что мы должны отменить эффект skew на изображении, и это невозможно сделать без дочернего элемента.

 .shape, .shape-image { position: relative; height: 150px; width: 400px; border-bottom: 2px solid crimson; overflow: hidden; } .shape:before, .shape:after, .shape-image:after { position: absolute; content: ''; top: 0px; height: 100%; z-index: -1; } .shape:before, .shape-image .before { left: 0px; top: -2px; width: 50px; border: 2px solid crimson; border-width: 3px 0px 0px 2px; border-top-left-radius: 8px; transform-origin: right bottom; transform: skewY(-45deg); } .shape:after, .shape-image:after { left: 52px; width: calc(100% - 54px); border: 2px solid crimson; border-left: none; } .shape:after, .shape:before { background: aliceblue; } .shape.semi-transparent:after, .shape.semi-transparent:before { background: rgba(150, 150, 150, 0.5); } .shape-image .before { position: absolute; top: 0px; height: 100%; overflow: hidden; } .shape-image .before .img { height: 100%; width: 100%; border-top-left-radius: 8px; background: url(http://lorempixel.com/400/150); transform-origin: right bottom; transform: skewY(45deg); } .shape-image:after { background: url(http://lorempixel.com/400/150); background-position: -50px 0px; } /* Just for demo */ body{ background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%); } .shape{ margin: 10px; } тем .shape, .shape-image { position: relative; height: 150px; width: 400px; border-bottom: 2px solid crimson; overflow: hidden; } .shape:before, .shape:after, .shape-image:after { position: absolute; content: ''; top: 0px; height: 100%; z-index: -1; } .shape:before, .shape-image .before { left: 0px; top: -2px; width: 50px; border: 2px solid crimson; border-width: 3px 0px 0px 2px; border-top-left-radius: 8px; transform-origin: right bottom; transform: skewY(-45deg); } .shape:after, .shape-image:after { left: 52px; width: calc(100% - 54px); border: 2px solid crimson; border-left: none; } .shape:after, .shape:before { background: aliceblue; } .shape.semi-transparent:after, .shape.semi-transparent:before { background: rgba(150, 150, 150, 0.5); } .shape-image .before { position: absolute; top: 0px; height: 100%; overflow: hidden; } .shape-image .before .img { height: 100%; width: 100%; border-top-left-radius: 8px; background: url(http://lorempixel.com/400/150); transform-origin: right bottom; transform: skewY(45deg); } .shape-image:after { background: url(http://lorempixel.com/400/150); background-position: -50px 0px; } /* Just for demo */ body{ background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%); } .shape{ margin: 10px; } того, как .shape, .shape-image { position: relative; height: 150px; width: 400px; border-bottom: 2px solid crimson; overflow: hidden; } .shape:before, .shape:after, .shape-image:after { position: absolute; content: ''; top: 0px; height: 100%; z-index: -1; } .shape:before, .shape-image .before { left: 0px; top: -2px; width: 50px; border: 2px solid crimson; border-width: 3px 0px 0px 2px; border-top-left-radius: 8px; transform-origin: right bottom; transform: skewY(-45deg); } .shape:after, .shape-image:after { left: 52px; width: calc(100% - 54px); border: 2px solid crimson; border-left: none; } .shape:after, .shape:before { background: aliceblue; } .shape.semi-transparent:after, .shape.semi-transparent:before { background: rgba(150, 150, 150, 0.5); } .shape-image .before { position: absolute; top: 0px; height: 100%; overflow: hidden; } .shape-image .before .img { height: 100%; width: 100%; border-top-left-radius: 8px; background: url(http://lorempixel.com/400/150); transform-origin: right bottom; transform: skewY(45deg); } .shape-image:after { background: url(http://lorempixel.com/400/150); background-position: -50px 0px; } /* Just for demo */ body{ background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%); } .shape{ margin: 10px; } тем .shape, .shape-image { position: relative; height: 150px; width: 400px; border-bottom: 2px solid crimson; overflow: hidden; } .shape:before, .shape:after, .shape-image:after { position: absolute; content: ''; top: 0px; height: 100%; z-index: -1; } .shape:before, .shape-image .before { left: 0px; top: -2px; width: 50px; border: 2px solid crimson; border-width: 3px 0px 0px 2px; border-top-left-radius: 8px; transform-origin: right bottom; transform: skewY(-45deg); } .shape:after, .shape-image:after { left: 52px; width: calc(100% - 54px); border: 2px solid crimson; border-left: none; } .shape:after, .shape:before { background: aliceblue; } .shape.semi-transparent:after, .shape.semi-transparent:before { background: rgba(150, 150, 150, 0.5); } .shape-image .before { position: absolute; top: 0px; height: 100%; overflow: hidden; } .shape-image .before .img { height: 100%; width: 100%; border-top-left-radius: 8px; background: url(http://lorempixel.com/400/150); transform-origin: right bottom; transform: skewY(45deg); } .shape-image:after { background: url(http://lorempixel.com/400/150); background-position: -50px 0px; } /* Just for demo */ body{ background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%); } .shape{ margin: 10px; } того, как .shape, .shape-image { position: relative; height: 150px; width: 400px; border-bottom: 2px solid crimson; overflow: hidden; } .shape:before, .shape:after, .shape-image:after { position: absolute; content: ''; top: 0px; height: 100%; z-index: -1; } .shape:before, .shape-image .before { left: 0px; top: -2px; width: 50px; border: 2px solid crimson; border-width: 3px 0px 0px 2px; border-top-left-radius: 8px; transform-origin: right bottom; transform: skewY(-45deg); } .shape:after, .shape-image:after { left: 52px; width: calc(100% - 54px); border: 2px solid crimson; border-left: none; } .shape:after, .shape:before { background: aliceblue; } .shape.semi-transparent:after, .shape.semi-transparent:before { background: rgba(150, 150, 150, 0.5); } .shape-image .before { position: absolute; top: 0px; height: 100%; overflow: hidden; } .shape-image .before .img { height: 100%; width: 100%; border-top-left-radius: 8px; background: url(http://lorempixel.com/400/150); transform-origin: right bottom; transform: skewY(45deg); } .shape-image:after { background: url(http://lorempixel.com/400/150); background-position: -50px 0px; } /* Just for demo */ body{ background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%); } .shape{ margin: 10px; } того, как .shape, .shape-image { position: relative; height: 150px; width: 400px; border-bottom: 2px solid crimson; overflow: hidden; } .shape:before, .shape:after, .shape-image:after { position: absolute; content: ''; top: 0px; height: 100%; z-index: -1; } .shape:before, .shape-image .before { left: 0px; top: -2px; width: 50px; border: 2px solid crimson; border-width: 3px 0px 0px 2px; border-top-left-radius: 8px; transform-origin: right bottom; transform: skewY(-45deg); } .shape:after, .shape-image:after { left: 52px; width: calc(100% - 54px); border: 2px solid crimson; border-left: none; } .shape:after, .shape:before { background: aliceblue; } .shape.semi-transparent:after, .shape.semi-transparent:before { background: rgba(150, 150, 150, 0.5); } .shape-image .before { position: absolute; top: 0px; height: 100%; overflow: hidden; } .shape-image .before .img { height: 100%; width: 100%; border-top-left-radius: 8px; background: url(http://lorempixel.com/400/150); transform-origin: right bottom; transform: skewY(45deg); } .shape-image:after { background: url(http://lorempixel.com/400/150); background-position: -50px 0px; } /* Just for demo */ body{ background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%); } .shape{ margin: 10px; } того, как .shape, .shape-image { position: relative; height: 150px; width: 400px; border-bottom: 2px solid crimson; overflow: hidden; } .shape:before, .shape:after, .shape-image:after { position: absolute; content: ''; top: 0px; height: 100%; z-index: -1; } .shape:before, .shape-image .before { left: 0px; top: -2px; width: 50px; border: 2px solid crimson; border-width: 3px 0px 0px 2px; border-top-left-radius: 8px; transform-origin: right bottom; transform: skewY(-45deg); } .shape:after, .shape-image:after { left: 52px; width: calc(100% - 54px); border: 2px solid crimson; border-left: none; } .shape:after, .shape:before { background: aliceblue; } .shape.semi-transparent:after, .shape.semi-transparent:before { background: rgba(150, 150, 150, 0.5); } .shape-image .before { position: absolute; top: 0px; height: 100%; overflow: hidden; } .shape-image .before .img { height: 100%; width: 100%; border-top-left-radius: 8px; background: url(http://lorempixel.com/400/150); transform-origin: right bottom; transform: skewY(45deg); } .shape-image:after { background: url(http://lorempixel.com/400/150); background-position: -50px 0px; } /* Just for demo */ body{ background-image: radial-gradient(circle, #3F9CBA 0%, #153346 100%); } .shape{ margin: 10px; } 
  

Это можно сделать, но это решение для CSS3, поэтому я не буду работать над старыми браузерами.

То, что я сделал, я создал два div, у каждого есть граница, а у другой – граница только внизу. Используя translate я затем повернул этот div 45 gradleусов, чтобы замаскировать угол другого div, давая желаемый эффект.

HTML

 

CSS

 .holder { position:relative; width: 180px; margin:30px } .main { width: 160px; height: 40px; border: 1px solid grey; position:absolute; left:0; z-index: 1; } .corner { border-bottom: 1px solid grey; width:30px; height: 41px; position:absolute; top:-25px; right:0; z-index:2; background:#fff; /* Safari */ -webkit-transform: rotate(45deg); /* Firefox */ -moz-transform: rotate(45deg); /* IE */ -ms-transform: rotate(45deg); /* Opera */ -o-transform: rotate(45deg); } направо .holder { position:relative; width: 180px; margin:30px } .main { width: 160px; height: 40px; border: 1px solid grey; position:absolute; left:0; z-index: 1; } .corner { border-bottom: 1px solid grey; width:30px; height: 41px; position:absolute; top:-25px; right:0; z-index:2; background:#fff; /* Safari */ -webkit-transform: rotate(45deg); /* Firefox */ -moz-transform: rotate(45deg); /* IE */ -ms-transform: rotate(45deg); /* Opera */ -o-transform: rotate(45deg); } 

Вывод

Обрезанный угол

См. Скрипку

  • Создание радиального меню в CSS
  • Сделайте div div двумя строками в сетке
  • CSS3 Transform Skew One Side
  • Анимация CSS3: отображение + непрозрачность
  • Поддерживать соотношение сторон в соответствии с высотой
  • Текст в контейнере flex не переносится в IE11
  • CSS3 Spin Animation
  • Чистый CSS-сбой / расширение div
  • Эмуляция пограничного радиуса CSS3 и box-shadow в IE7 / 8
  • Определенные края с помощью CSS3 Filter Blur
  • Должен ли я использовать одиночные двоеточия (:) или двойные двоеточия (: :) для псевдо-элементов до, после, первой буквы и первой строки?
  • Interesting Posts

    Как вы определяете локальный var / val в основном конструкторе в Scala?

    Можете ли вы сделать flashdrive только для чтения?

    Как восстановить таблицу InnoDB?

    OleDbCommandBuilder создает операторы SQL, которые приводят к “синтаксической ошибке”

    Как переустановить загрузчик grub-efi на Fedora Linux?

    Как преобразовать изображение RGB в оттенки серого, но сохранить один цвет?

    Как устранить неисправность жесткого диска, которая дает быстрый звуковой сигнал и не распознается ПК?

    Как настроить список приветственных файлов в web.xml

    Обработка исключений: бросок, броски и Throwable

    Как использовать LDFLAGS в make-файле

    Приведение float в int (побитовое) в C

    Нельзя передать временный объект в качестве ссылки

    Вызов ASP.NET PageMethod / WebMethod с помощью jQuery – возвращает всю страницу

    Laravel перенаправляет обратно в исходное место после входа в систему

    MVC 3 – Html.EditorFor, похоже, кэширует старые значения после вызова $ .ajax

    Давайте будем гением компьютера.