Как получить зигзагообразную границу с цветом фона и другим цветом контура?
У меня есть контейнер с текстом. Контейнер должен иметь цвет фона (rgba (242,156,51,0.15) и зигзагообразную границу с другим цветом, например, оранжевым. Возможно ли это?
Смотрите изображение ниже, как я хочу
Это то, что у меня есть
.container {
height: 500px;
position: relative;
padding: 30px 8px 32px 8px;
background: #dddccf;
}
.container:after {
background: linear-gradient(-45deg, #ffffff 16px, transparent 0), linear-gradient(45deg, #ffffff 16px, transparent 0);
background-position: left-bottom;
background-repeat: repeat-x;
background-size: 32px 32px;
content: " ";
display: block;
position: absolute;
top: -7px;
left: 0px;
width: 100%;
height: 32px;
transform: rotate(180deg)
}<div class = "container">
Lorem Ipsum
</div>нужно, чтобы эта граница была со всех 4 сторон?
—
02.05.2018 13:41
w3.org/TR/2002/WD-css3-border-20021107
—
02.05.2018 13:48
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
2
3
56
1
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 1
Ответ принят как подходящий
Простое решение - объединить SVG и несколько фонов. Идея состоит в том, чтобы создать верхнюю форму с помощью SVG и повторить ее:
.container {
width:400px;
margin:50px;
height:200px;
background:
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='22 -5 20 15' height='20' width='20'><path stroke='red' fill='orange' stroke-width='2' d='M16 16 L48 16 L32 0 Z' /></svg>")0 0/20px 20px repeat-x,
linear-gradient(orange,orange)0 20px/100% 100% no-repeat;
}
body {
background:linear-gradient(to right, pink,yellow);
}<div class = "container">
</div>И если вы хотите, чтобы это было со всех сторон, вы можете попробовать это:
.container {
width:400px;
margin:50px;
height:200px;
background:
url("data:image/svg+xml;utf8,<svg style='transform:rotate(180deg)' xmlns='http://www.w3.org/2000/svg' viewBox='22 -5 20 15' height='20' width='20'><path stroke='red' fill='orange' stroke-width='2' d='M16 16 L48 16 L32 0 Z' /></svg>")0 100%/20px 20px repeat-x,
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='22 -5 20 15' height='20' width='20'><path stroke='red' fill='orange' stroke-width='2' d='M16 16 L48 16 L32 0 Z' /></svg>")20px 0/20px 20px repeat-x,
linear-gradient(orange,orange)0 20px/100% calc(100% - 40px) no-repeat;
position:relative;
}
.container:after {
content:'';
position:absolute;
top:20px;
bottom:20px;
width:20px;
right:-20px;
background:
url("data:image/svg+xml;utf8,<svg style='transform:rotate(90deg)' xmlns='http://www.w3.org/2000/svg' viewBox='22 -5 20 15' height='20' width='20'><path stroke='red' fill='orange' stroke-width='2' d='M16 16 L48 16 L32 0 Z' /></svg>")0 0/20px 20px repeat-y;
}
.container:before {
content:'';
position:absolute;
top:20px;
bottom:20px;
width:20px;
left:-20px;
background:
url("data:image/svg+xml;utf8,<svg style='transform:rotate(270deg)' xmlns='http://www.w3.org/2000/svg' viewBox='22 -5 20 15' height='20' width='20'><path stroke='red' fill='orange' stroke-width='2' d='M16 16 L48 16 L32 0 Z' /></svg>")0 0/20px 20px repeat-y;
}
body {
background:linear-gradient(to right, pink,yellow);
}<div class = "container">
</div>это происходит немного поздно, но как сделать зигзаги более плоскими (по высоте), как на добавленном мной изображении?
—
03.05.2018 09:44
Вы можете отредактировать форму, настроив атрибут SVG Path d в соответствии с вашими потребностями, следуя документации здесь: developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d
—
03.05.2018 10:18
Другие вопросы по теме
Как динамически добавлять разрыв страницы, если печать достигает второй страницы
Добавление плавной прокрутки в bootstrap 4.1 (при использовании scrollspy)?
Как сделать так, чтобы кнопка добавления в корзину выглядела как это изображение с помощью css?
Уменьшите мерцание / увеличьте плавность при использовании функции прокрутки
Изменить анимированное фоновое изображение CSS с помощью ползунка непрозрачности?
Таблицы начальной загрузки, использующие класс table-hover и rowspan в HTML, не выделяют (при наведении курсора) даже строки, относящиеся к их основной категории
Переместить логотип рядом с кнопкой в мобильный вид на сайте Wordpress?
Функция jquery, которая выполняет изменение css, если изображение не загружено
Центрируйте div внутри карусели Bootstrap с помощью Flexbox
Почему селектор прямого потомка CSS не применяется к компоненту Angular
Похожие вопросы
Как динамически добавлять разрыв страницы, если печать достигает второй страницы
Как при загрузке страницы указать данные для входа в форму, встроенную в iframe?
Onbeforeunload не работает в HTML
Заполните первую строку таблицы выводом отображаемой функции в jQuery
Уменьшите мерцание / увеличьте плавность при использовании функции прокрутки
Изменить анимированное фоновое изображение CSS с помощью ползунка непрозрачности?
Добавление текста при переключении изображения по клику
Функция jquery, которая выполняет изменение css, если изображение не загружено
NgStyle фоновое изображение
Диалог подтверждения / диалог SweetAlert перед Ajax POST
Зависит - в основном от тех частей, в которых вы в значительной степени не были конкретизированы, например, должно ли это работать «прозрачно» или только с твердым фоном. Кроме того, вопросы «возможно ли» здесь не приветствуются - прочтите, пожалуйста, об этом Как спросить.