Голову сломал, как сверстать такой блок?

Question

[Алексей Малышев]

Помогите, не могу придумать, как сделать такой блок

думал отрезать низ, да подставить в нужное место, но градиент мешает, потому что внутри блока текст, а значит блок расширяется и цвета могут не совпасть

.blueGradientScroll {
	background: #bdd6e7 ;
	background: -moz-linear-gradient(top, #d8e9f4  0%, #bdd6e7 100%);
	background: -webkit-linear-gradient(top, #d8e9f4  0%, #bdd6e7 100%);
	background: linear-gradient(to bottom, #d8e9f4  0%, #bdd6e7 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d8e9f4 ', endColorstr='#bdd6e7',GradientType=0 );
	width: 780px;
}

Comments

[alex-1917]

#ДизайнераПоменяй

Answer 1

[Андрей]

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="780px" height="1080px" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 13559 18770"
 xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
  <style type="text/css">
   <![CDATA[
    .fil0 {fill:url(#id0)}
   ]]>
  </style>
  <linearGradient id="id0" gradientUnits="userSpaceOnUse" x1="29585.7" y1="0" x2="29585.7" y2="81913">
   <stop offset="0" style="stop-color:#D8E9F4"/>
   <stop offset="1" style="stop-color:#BDD6E7"/>
  </linearGradient>
 </defs>
 <g id="Layer_x0020_1">
  <path class="fil0" d="M0 81913c18825,0 40349,-1237 59171,-2245l-537 -694c-479,-732 -907,-1932 -1129,-2782 -706,-2696 -1099,-6426 -1085,-9199 2,-508 -71,-723 -76,-1155l3 -65838 -56347 0 0 81913z"/>
 </g>
</svg>

Comments

[alex-1917]

Алексей Малышев, вы главное без фанатизма, а то налепят таких вот кусков кода, а потом бегут тему создавать Почему смартфон/планшет бесконечно перезагружает страницу...

[Алексей Малышев]

Только это будет же просто заданный размер листка, а в моем случае он должен раздвигаться сверху вниз:c В зависимости от контента внутри

[Андрей]

svg+js все прекрасно масштабируется растягивается и т.д., а одним "резиновым дивом" на все случаи жизни да с градиентом вы это не сделаете
P.S. svg.js

[Алексей Малышев]

background: url(/dist/img/scroll.svg) no-repeat;
background-size: 100% 100%;

Сделал так, надеюсь все такие блоки будут примерно одного размера и не будет сильно искажаться уголок, если что, переделаю
Всем большое спасибо