Волна (или форма?) С рамкой на CSS3

Мне нужно реализовать форму волны с CSS3, я попытался реализовать с помощью CSS3 Shapes, но я не достиг желаемого результата.

* { margin: 0; padding: 0; } body { background: #007FC1; } .container, .panel { border-bottom: 4px solid #B4CAD8; } .container { background-color: #fff; } .container > .text { padding: 0.5em; } .panel { position: relative; float: right; width: 200px; height: 40px; margin-top: -4px; background-color: #fff; line-height: 42px; text-align: center; } .panel:before { content: ''; position: absolute; left: -44px; width: 0; height: 0; border-top: 44px solid #B4CAD8; border-left: 44px solid transparent; } 
 

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates nam fuga eligendi ipsum sed ducimus quia adipisci unde atque enim quasi quidem perspiciatis totam soluta tempora hic voluptatem optio perferendis.

this is a panel

Невозможно реализовать границу и установить фоновый цвет в форме волны. Мне нужно добиться этого результата:

Форма волны с границей

Вы можете использовать svg вместо .panel ( div ) и .panel его вправо.

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

 body { background: #007FC1; } .container { border-bottom: 4px solid #B4CAD8; } .container { background-color: #fff; z-index: -1; } .container > .text { padding: 0.5em; } .panel { position: relative; float: right; margin-top: -4px; } 
 

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates nam fuga eligendi ipsum sed ducimus quia adipisci unde atque enim quasi quidem perspiciatis totam soluta tempora hic voluptatem optio perferendis.

This is a panel

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

  1. База представляет собой div представляющий собой белый прямоугольный прямоугольник. В коробке нижняя 50px имеет прозрачный цвет, 3px после этого имеет светло-голубой цвет, а остальная часть имеет белый цвет. Это делает его похожим на то, что верхняя половина – белый прямоугольник со светлой границей. Прозрачная часть 50px внизу помогает сделать область выреза, как будто она не является частью контейнера.
  2. Псевдоэлементы перекошены и расположены в правом нижнем углу родительского контейнера для получения изогнутого эффекта. У них также есть несколько теней для теней, чтобы создать границу.
  3. Содержимое добавляется с помощью отдельного div и снова помещается в нижнем правом углу родителя.
 .content { position: relative; height: 150px; padding: 10px; background: linear-gradient(270deg, transparent 200px, lightblue 200px) no-repeat, linear-gradient(0deg, transparent 50px, white 50px); background-position: 100% 117px, 100% 100%; background-size: 100% 3px, 100% 100%; overflow: hidden; } .content:before { position: absolute; content: ''; height: 25px; width: 50px; bottom: 25px; right: 170px; background: transparent; border-top-right-radius: 18px; box-shadow: 4px -3px 0px lightblue, 4px 0px 0px lightblue, 20px 0px 0px white; transform: skew(30deg); z-index: 2; } .content:after { position: absolute; content: ''; right: 0px; bottom: 0px; height: 50px; width: 177px; background: white; border-bottom-left-radius: 18px; box-shadow: inset 4px -3px 0px lightblue; transform-origin: right top; transform: skew(30deg); } .panel { position: absolute; bottom: 3px; right: 0px; height: 50px; width: 135px; line-height: 50px; z-index: 3; } /* just for demo */ body { background: linear-gradient(90deg, crimson, indianred, purple); font-family: Calibri; } 
  
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates nam fuga eligendi ipsum sed ducimus quia adipisci unde atque enim quasi quidem perspiciatis totam soluta tempora hic voluptatem optio perferendis
This is a panel

Только CSS-решение

Я сделал только форму, как вы ее просили. Добавление его на страницу очень просто с помощью позиционирования. Для таких задач не очень практично использовать CSS. Я потратил около 15-20 минут на простую форму! В таких случаях SVG гораздо предпочтительнее. Но как это можно сделать, это нужно сделать. Вот :

 body{ margin:0; padding:0; } #one{ position:absolute; top:30px; left:-30px; height:10px; width:10px; } #one > span{ position:relative; top:-215px; left:300px; text-align:center; width:300px; height:80px; display:block; line-height:80px; z-index:4; } .one{ position: relative; height: 90px; width: 300px; background-color: #007FC1; border-radius: 25px; -webkit-transform: skew(30deg); transform: skew(30deg); z-index:2; } .obefore { height:35px; width:60px; position:relative; top:-35px; left:290px; background-color: #007FC1; -webkit-transform: skew(30deg); transform: skew(30deg); z-index:1; } .oafter{ position: relative; top: -135px; left:310px; height: 90px; width: 300px; background-color: white; border-bottom-left-radius: 25px; -webkit-transform: skew(30deg); transform: skew(30deg); z-index:3; } #two{ position:absolute; top:20px; left:-20px; } .two{ position: relative; height: 90px; width: 300px; background-color: #B4CAD8; border-radius: 25px; -webkit-transform: skew(30deg); transform: skew(30deg); z-index:0; } .tafter{ position: relative; top: -80px; left:290px; height: 90px; width: 300px; background-color: #B4CAD8; border-top-left-radius: 45px; border-bottom-left-radius: 25px; -webkit-transform: skew(30deg); transform: skew(30deg); z-index:2; } направо body{ margin:0; padding:0; } #one{ position:absolute; top:30px; left:-30px; height:10px; width:10px; } #one > span{ position:relative; top:-215px; left:300px; text-align:center; width:300px; height:80px; display:block; line-height:80px; z-index:4; } .one{ position: relative; height: 90px; width: 300px; background-color: #007FC1; border-radius: 25px; -webkit-transform: skew(30deg); transform: skew(30deg); z-index:2; } .obefore { height:35px; width:60px; position:relative; top:-35px; left:290px; background-color: #007FC1; -webkit-transform: skew(30deg); transform: skew(30deg); z-index:1; } .oafter{ position: relative; top: -135px; left:310px; height: 90px; width: 300px; background-color: white; border-bottom-left-radius: 25px; -webkit-transform: skew(30deg); transform: skew(30deg); z-index:3; } #two{ position:absolute; top:20px; left:-20px; } .two{ position: relative; height: 90px; width: 300px; background-color: #B4CAD8; border-radius: 25px; -webkit-transform: skew(30deg); transform: skew(30deg); z-index:0; } .tafter{ position: relative; top: -80px; left:290px; height: 90px; width: 300px; background-color: #B4CAD8; border-top-left-radius: 45px; border-bottom-left-radius: 25px; -webkit-transform: skew(30deg); transform: skew(30deg); z-index:2; } направо body{ margin:0; padding:0; } #one{ position:absolute; top:30px; left:-30px; height:10px; width:10px; } #one > span{ position:relative; top:-215px; left:300px; text-align:center; width:300px; height:80px; display:block; line-height:80px; z-index:4; } .one{ position: relative; height: 90px; width: 300px; background-color: #007FC1; border-radius: 25px; -webkit-transform: skew(30deg); transform: skew(30deg); z-index:2; } .obefore { height:35px; width:60px; position:relative; top:-35px; left:290px; background-color: #007FC1; -webkit-transform: skew(30deg); transform: skew(30deg); z-index:1; } .oafter{ position: relative; top: -135px; left:310px; height: 90px; width: 300px; background-color: white; border-bottom-left-radius: 25px; -webkit-transform: skew(30deg); transform: skew(30deg); z-index:3; } #two{ position:absolute; top:20px; left:-20px; } .two{ position: relative; height: 90px; width: 300px; background-color: #B4CAD8; border-radius: 25px; -webkit-transform: skew(30deg); transform: skew(30deg); z-index:0; } .tafter{ position: relative; top: -80px; left:290px; height: 90px; width: 300px; background-color: #B4CAD8; border-top-left-radius: 45px; border-bottom-left-radius: 25px; -webkit-transform: skew(30deg); transform: skew(30deg); z-index:2; } направо body{ margin:0; padding:0; } #one{ position:absolute; top:30px; left:-30px; height:10px; width:10px; } #one > span{ position:relative; top:-215px; left:300px; text-align:center; width:300px; height:80px; display:block; line-height:80px; z-index:4; } .one{ position: relative; height: 90px; width: 300px; background-color: #007FC1; border-radius: 25px; -webkit-transform: skew(30deg); transform: skew(30deg); z-index:2; } .obefore { height:35px; width:60px; position:relative; top:-35px; left:290px; background-color: #007FC1; -webkit-transform: skew(30deg); transform: skew(30deg); z-index:1; } .oafter{ position: relative; top: -135px; left:310px; height: 90px; width: 300px; background-color: white; border-bottom-left-radius: 25px; -webkit-transform: skew(30deg); transform: skew(30deg); z-index:3; } #two{ position:absolute; top:20px; left:-20px; } .two{ position: relative; height: 90px; width: 300px; background-color: #B4CAD8; border-radius: 25px; -webkit-transform: skew(30deg); transform: skew(30deg); z-index:0; } .tafter{ position: relative; top: -80px; left:290px; height: 90px; width: 300px; background-color: #B4CAD8; border-top-left-radius: 45px; border-bottom-left-radius: 25px; -webkit-transform: skew(30deg); transform: skew(30deg); z-index:2; } направо body{ margin:0; padding:0; } #one{ position:absolute; top:30px; left:-30px; height:10px; width:10px; } #one > span{ position:relative; top:-215px; left:300px; text-align:center; width:300px; height:80px; display:block; line-height:80px; z-index:4; } .one{ position: relative; height: 90px; width: 300px; background-color: #007FC1; border-radius: 25px; -webkit-transform: skew(30deg); transform: skew(30deg); z-index:2; } .obefore { height:35px; width:60px; position:relative; top:-35px; left:290px; background-color: #007FC1; -webkit-transform: skew(30deg); transform: skew(30deg); z-index:1; } .oafter{ position: relative; top: -135px; left:310px; height: 90px; width: 300px; background-color: white; border-bottom-left-radius: 25px; -webkit-transform: skew(30deg); transform: skew(30deg); z-index:3; } #two{ position:absolute; top:20px; left:-20px; } .two{ position: relative; height: 90px; width: 300px; background-color: #B4CAD8; border-radius: 25px; -webkit-transform: skew(30deg); transform: skew(30deg); z-index:0; } .tafter{ position: relative; top: -80px; left:290px; height: 90px; width: 300px; background-color: #B4CAD8; border-top-left-radius: 45px; border-bottom-left-radius: 25px; -webkit-transform: skew(30deg); transform: skew(30deg); z-index:2; } направо body{ margin:0; padding:0; } #one{ position:absolute; top:30px; left:-30px; height:10px; width:10px; } #one > span{ position:relative; top:-215px; left:300px; text-align:center; width:300px; height:80px; display:block; line-height:80px; z-index:4; } .one{ position: relative; height: 90px; width: 300px; background-color: #007FC1; border-radius: 25px; -webkit-transform: skew(30deg); transform: skew(30deg); z-index:2; } .obefore { height:35px; width:60px; position:relative; top:-35px; left:290px; background-color: #007FC1; -webkit-transform: skew(30deg); transform: skew(30deg); z-index:1; } .oafter{ position: relative; top: -135px; left:310px; height: 90px; width: 300px; background-color: white; border-bottom-left-radius: 25px; -webkit-transform: skew(30deg); transform: skew(30deg); z-index:3; } #two{ position:absolute; top:20px; left:-20px; } .two{ position: relative; height: 90px; width: 300px; background-color: #B4CAD8; border-radius: 25px; -webkit-transform: skew(30deg); transform: skew(30deg); z-index:0; } .tafter{ position: relative; top: -80px; left:290px; height: 90px; width: 300px; background-color: #B4CAD8; border-top-left-radius: 45px; border-bottom-left-radius: 25px; -webkit-transform: skew(30deg); transform: skew(30deg); z-index:2; } направо body{ margin:0; padding:0; } #one{ position:absolute; top:30px; left:-30px; height:10px; width:10px; } #one > span{ position:relative; top:-215px; left:300px; text-align:center; width:300px; height:80px; display:block; line-height:80px; z-index:4; } .one{ position: relative; height: 90px; width: 300px; background-color: #007FC1; border-radius: 25px; -webkit-transform: skew(30deg); transform: skew(30deg); z-index:2; } .obefore { height:35px; width:60px; position:relative; top:-35px; left:290px; background-color: #007FC1; -webkit-transform: skew(30deg); transform: skew(30deg); z-index:1; } .oafter{ position: relative; top: -135px; left:310px; height: 90px; width: 300px; background-color: white; border-bottom-left-radius: 25px; -webkit-transform: skew(30deg); transform: skew(30deg); z-index:3; } #two{ position:absolute; top:20px; left:-20px; } .two{ position: relative; height: 90px; width: 300px; background-color: #B4CAD8; border-radius: 25px; -webkit-transform: skew(30deg); transform: skew(30deg); z-index:0; } .tafter{ position: relative; top: -80px; left:290px; height: 90px; width: 300px; background-color: #B4CAD8; border-top-left-radius: 45px; border-bottom-left-radius: 25px; -webkit-transform: skew(30deg); transform: skew(30deg); z-index:2; } 
 
This is a Panel.

Использование двух элементов для создания волны:

 html,body{background:black;} .wave{ height:40px; width:100%; transform:skewX(30deg); background:blue; border-top:5px solid lightblue; border-right:5px solid lightblue; margin-left:-20%; position:relative; border-radius:5px; } .wave:before{ position:absolute; content:""; height:100%; width:20%; background:transparent; right:-20%; top:-5px; border-radius:5px; border-bottom:5px solid lightblue; } .wave:after{ position:absolute; content:""; height:5px; width:5px; background:black; right:-1.65%; bottom:4px; border-radius:50%; } тем html,body{background:black;} .wave{ height:40px; width:100%; transform:skewX(30deg); background:blue; border-top:5px solid lightblue; border-right:5px solid lightblue; margin-left:-20%; position:relative; border-radius:5px; } .wave:before{ position:absolute; content:""; height:100%; width:20%; background:transparent; right:-20%; top:-5px; border-radius:5px; border-bottom:5px solid lightblue; } .wave:after{ position:absolute; content:""; height:5px; width:5px; background:black; right:-1.65%; bottom:4px; border-radius:50%; } того, как html,body{background:black;} .wave{ height:40px; width:100%; transform:skewX(30deg); background:blue; border-top:5px solid lightblue; border-right:5px solid lightblue; margin-left:-20%; position:relative; border-radius:5px; } .wave:before{ position:absolute; content:""; height:100%; width:20%; background:transparent; right:-20%; top:-5px; border-radius:5px; border-bottom:5px solid lightblue; } .wave:after{ position:absolute; content:""; height:5px; width:5px; background:black; right:-1.65%; bottom:4px; border-radius:50%; } 
 

Форма для сообщения Как получить эту форму в CSS не в SVG :

 #shape { width:210px; } #left { border-bottom: 5px solid black; border-right: 5px solid black; border-bottom-right-radius: 70px; background-color: white; width: 40px; height: 80px; float: left; margin-top: 65px; z-index: 1; position: relative; } #right { border-left:5px solid black; border-top:5px solid black; border-top-left-radius:70px; margin-left: -5px; width:30px; height:100px; float:left; background-color:yellow; width: 165px; } #bottom { width:205px; height:50px; background-color:yellow; border-left:5px solid black; clear:both; } #middle { height: 45px; width: 205px; background-color: yellow; top: 105px; position: relative; z-index: 0; border-left: 5px solid black; } то и #shape { width:210px; } #left { border-bottom: 5px solid black; border-right: 5px solid black; border-bottom-right-radius: 70px; background-color: white; width: 40px; height: 80px; float: left; margin-top: 65px; z-index: 1; position: relative; } #right { border-left:5px solid black; border-top:5px solid black; border-top-left-radius:70px; margin-left: -5px; width:30px; height:100px; float:left; background-color:yellow; width: 165px; } #bottom { width:205px; height:50px; background-color:yellow; border-left:5px solid black; clear:both; } #middle { height: 45px; width: 205px; background-color: yellow; top: 105px; position: relative; z-index: 0; border-left: 5px solid black; } 
 
  • Вставить SVG в SVG?
  • Как разрезать отверстие в прямоугольнике SVG
  • Отображение SVG в OpenGL без промежуточного растра
  • Преобразование SVG в PNG с использованием C #
  • Преобразование из EPS в формат SVG
  • Округленный угол SVG
  • Поддержка SVG на Android
  • CSS: прежде чем на встроенном SVG
  • Как преобразовать PNG-изображение в SVG?
  • Selenium WebDriver : как нажимать на элементы в SVG с помощью XPath
  • SVG для Android Shape
  • Interesting Posts

    # включить все .cpp-файлы в единый блок компиляции?

    Рекомендации XML: атрибуты и дополнительные элементы

    Результат NAudio fft дает интенсивность на всех частотах C #

    Как использовать условное форматирование на основе сроков в Excel 2013?

    Java BigDecimal.power (BigDecimal exponent): Есть ли библиотека Java, которая это делает?

    Разница между методом и функцией в Scala

    Сумма двух дат в Java

    Использование удаленного рабочего стола для подключения к другим компьютерам за одним IP-адресом

    Весенние транзакции и hibernate.current_session_context_class

    Использовать локальную базу данных в Xamarin

    Удалить текст между разделителями в строке (с использованием регулярного выражения?)

    golang: slice struct! = срез интерфейса, который он реализует?

    Запрос доступа, дающий результаты, такие как ROW_NUMBER () в T-SQL

    Хорошее введение в .NET Reactive Framework

    Передача массива строк в web-метод с переменным числом аргументов с использованием jQuery AJAX

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