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

Ответ 1

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

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

<div class="container">
  <div class="text">
    <p>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.</p>
  </div>
</div>
<svg class="panel" width="200" height="54">
  <path d="M0,0 h7 q9,3 12.5,10 l13,30 q3.2,10 13,10 h157 v-50z" fill="white" />
  <path transform="translate(0, -0.5)" d="M0,2 h7 q10,2 13,10 l13,30 q3,9 13,10 h157" fill="none" stroke="#B4CAD8" stroke-width="4" />
  <text x="110.5" y="25" text-anchor="middle">This is a panel</text>
</svg>

Ответ 2

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

• База представляет собой div, представляющую собой белый прямоугольный прямоугольник. В коробке нижняя 50px имеет прозрачный цвет, 3px после этого имеет светло-голубой цвет, а остальная часть имеет белый цвет. Это делает его похожим на то, что верхняя половина - белый прямоугольник со светлой границей. Прозрачная часть 50px внизу помогает сделать область выреза, как будто она не является частью контейнера.
• Псевдоэлементы перекошены и расположены в правом нижнем углу родительского контейнера для получения изогнутого эффекта. У них также есть несколько теней для теней, чтобы создать границу.
• Содержимое добавляется с помощью отдельного 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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class='content'>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
  <div class='panel'>This is a panel</div>
</div>

Ответ 3

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

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

<div class="wave"></div>

Ответ 4

Решение только для 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;
}

<div id="one">
<div class="one"></div>
<div class="obefore"></div>
<div class="oafter"></div>
    <span>This is a Panel.</span>
</div>
<div id="two">
<div class="two"></div>
<div class="tbefore"></div>
<div class="tafter"></div>
</div>

Ответ 5

Форма для сообщения Как получить эту фигуру в 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;
}

<div id="shape">
  <div id="left"></div>
  <div id="right"></div>
  <div id="middle"></div>
  <div id="bottom"></div>
</div>