Волна (или форма?) С рамкой на 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 USE и стиль наведения
  • firefox svg canvas drawImage error
  • Как установить ширину штриха: 1 только на определенных сторонах SVG-фигур?
  • Пакетное преобразование изображений SVG в нужный размер PNG или ICO
  • Добавить текст / метку на ссылки в графе D3 force
  • Как анимировать рукописный текст на веб-странице с помощью SVG?
  • Преобразование из EPS в формат SVG
  • Как извлечь встроенное изображение из SVG-файла?
  • Круговой рисунок с дуговой дорожкой SVG
  • Рисуем SVG на canvasе HTML5 с поддержкой элемента font
  • Давайте будем гением компьютера.