Форма границы в виде волны на CSS3

#html #css #css3 #svg

Мне нужно реализовать форму волны с помощью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




Я не смог реализовать границу и установить цвет фона на форму волны.   

Мне необходимо получить  результат, как на картинке ниже:   


    

Ответы

Ответ 1

CSS +SVG решение

   



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.
  






Вы также можете получить форму другим способом.   

      



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.
  






Немного более  интересней      

        



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.
  






А как насчёт реальной формы волны?  

       



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: -24px;
}

  

    
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.