¿Ola (o forma?) Con borde en CSS3

Necesito implementar una forma de onda con CSS3, traté de implementar con formas CSS3, pero no he alcanzado el resultado deseado.

* { 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

Es imposible implementar el borde y establecer el color de fondo en la forma de la ola. Necesito lograr este resultado:

forma de onda con borde

Puede usar svg lugar de .panel ( div ) y .panel a la derecha.

enter image description here

 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

Aquí hay un método para lograr la forma de onda usando CSS. (Esto es solo una ilustración de cómo lograrlo con CSS, pero SVG sigue siendo la herramienta recomendada para usar).

  1. La base es un div que es la caja rectangular blanca. En el cuadro, el 50px inferior tiene un color transparente, el 3px luego tiene un color azul claro y el rest tiene un color blanco. Esto hace que parezca que la mitad superior es un rectángulo blanco con un borde azul claro. La parte transparente de 50px en la parte inferior ayuda a que el área recortada parezca como si no formara parte del contenedor.
  2. Los pseudoelementos están sesgados y ubicados en la parte inferior derecha del contenedor principal para producir el efecto curvo. También tienen algunas sombras de caja agregadas para producir el borde.
  3. El contenido se agrega usando un div separado y se ubica de nuevo en la esquina inferior derecha del elemento principal.
 .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

Solución CSS única

He hecho solo la forma, como lo pediste. Agregarlo a la página es muy simple usando posicionamiento. Para tareas como estas, no es muy práctico usar CSS. ¡Perdí unos 15-20 minutos haciendo una forma simple! SVG es mucho más preferible en tales casos. Pero como se podría hacer, debe hacerse. Aquí :

 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.

Usando dos elementos para crear la ola:

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

Forma para la publicación Cómo obtener esta forma en CSS no en 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; }