SVG Кривая c изменяемым размером длинны

#css #css3 #svg #design

Есть необходимость построить блок в дизайне которого, встречается изогнутая градиентная
кривая, как на рисунке. Как это сделать, если неизвестно сколько текста будет в СЕО
блоке, и необходимо чтобы данная кривая имела возможность "тянуться" по высоте в зависимости
от родителя с текстом 

 

Пример кода я накидал



html,
body {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  color: #fff;
  font-family: Roboto, sans-serif;
}

body {
  background-color: #17161d;
}

.bl_fullWrapper {
  width: 100%;
  position: relative;
  min-height: 220px;
}

.bl_left,
.bl_right {
  position: relative;
  display: inline-block;
  padding: 30px;
}

.bl_left {
  width: calc(80% - 300px);
  margin-right: 5%;
  vertical-align: top;
}

.bl_right {
  width: 25%;
}

.bl_img {
  position: relative;
  width: 300px;
  box-shadow: 0 0 32px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background-color: #1e1b27;
}

.bl_img img {
  margin-top: 16px;
  margin-left: -26px;
}

.curvedLine {
  position: absolute;
  top: 0;
  left: -10%;
  width: 100%;
}

  

    
Title text very long
    
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Ipsa, similique et eius ratione suscipit corporis iste impedit libero, fuga natus,
dignissimos autem harum temporibus neque tenetur facere fugiat iusto. Vero accusantium
impedit placeat ea,
      consectetur nesciunt repellat minima dicta soluta qui, pariatur fugiat exercitationem,
optio quae iure sint labore rerum.libero, fuga natus, dignissimos autem harum temporibus
neque tenetur facere fugiat iusto. Vero accusantium impedit placeat ea,
      consectetur nesciunt repellat minima dicta soluta qui, pariatur fugiat exercitationem,
optio quae iure sint labore rerum libero, fuga natus, dignissimos autem harum temporibus
neque tenetur facere fugiat iusto. Vero accusantium impedit placeat ea,
      consectetur nesciunt repellat minima dicta soluta qui, pariatur fugiat exercitationem,
optio quae iure sint labore rerum
  
  

    

      
    
  

  






только он не адаптивный, как хотелось бы. Кто может посоветовать, как  реализовать
данный элемент дизайна, желательно без JS, средствами CSS + SVG ? 
    

Ответы

Ответ 1

Правильнее было бы сверстать на flex без inline-block, но что есть, то есть...

Надеюсь, что выставите нужные отступы, в соответствии с макетом:



html,
body {
  height: 100%;
  min-height: 100vh;
  width: 100%;
  margin: 0;
  padding: 0;
  color: #fff;
  font-family: Roboto, sans-serif;
}

body { background-color: #17161d; }

.bl_fullWrapper {
  min-height: 220px;
  width: 100%;
  padding-top: 30px;
}

.bl_left,
.bl_right {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  padding: 30px;
}

.bl_left {
  width: calc(100% - 365px);
  vertical-align: top;
}

div.bl_left:after {
  content: "";
  position: absolute;
  bottom: 0;
  right: -4px;
  height: 33px;
  width: 70%;
  border-radius: 0 0 30px 0;
  border-bottom: 3px solid #ca375f;
  border-right: 3px solid #ca375f;
}

div.bl_left:before {
  content: "";
  position: absolute;
  bottom: 30px;
  top: 30px;
  right: -4px;
  height: calc(100% - 60px);
  width: 3px;
  background: linear-gradient(to top, #ca375f, #ef8e34);
}

.bl_right { width: 360px; }

div.bl_right:after {
  content: "";
  position: absolute;
  top: 0;
  left: -3px;
  height: 33px;
  width: calc(100% - 30px);
  border-radius: 30px 0 0 0;
  border-top: 3px solid #ef8e34;
  border-left: 3px solid #ef8e34;
}

.bl_img {
  width: 300px;
  border-radius: 10px;
  background-color: #1e1b27;
  box-shadow: 16px -16px 10px 0px rgba(0, 0, 0, 0.2);
}

.bl_img img { border-radius: 5px; }

  

    
Title text very long
    
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Ipsa, similique et eius ratione suscipit corporis iste impedit libero, fuga natus,
dignissimos autem harum temporibus neque tenetur facere fugiat iusto. Vero accusantium
impedit placeat ea,
      consectetur nesciunt repellat minima dicta soluta qui, pariatur fugiat exercitationem,
optio quae iure sint labore rerum.libero, fuga natus, dignissimos autem harum temporibus
neque tenetur facere fugiat iusto. Vero accusantium impedit placeat ea,
      consectetur nesciunt repellat minima dicta soluta qui, pariatur fugiat exercitationem,
optio quae iure sint labore rerum libero, fuga natus, dignissimos autem harum temporibus
neque tenetur facere fugiat iusto. Vero accusantium impedit placeat ea,
      consectetur nesciunt repellat minima dicta soluta qui, pariatur fugiat exercitationem,
optio quae iure sint labore rerum
  
  

    

      
    
  





Разверните на всю страницу и изменяйте размер окна браузера, чтобы проверить адаптивность.