Как сверстать адаптивную рамку над фоном с градиентом?

Рейтинг: 2Ответов: 4Опубликовано: 30.10.2014

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

alt text

css css-animation svg вёрстка svg-filter
Источник: Stack Overflow на русском

Ответы

▲ 4

Можно так:

http://jsfiddle.net/xv3a6spf/

Только для однотонной заливки.

Этот способ нельзя применить для градиентов или фоновых картинок.

Также можно просто вырезать уголок и спозиционировать его.

▲ 3

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

Для таких случаев подходит больше всего решения SVG.

Создав один раз контур фигуры вы получаете все преимущества SVG: адаптивность, интерактивность.

Можно заполнить контур изображением или наоборот сделать его прозрачным, чтобы был виден фон. Во всех примерах в качестве фона использован трехцветный градиент от @zhurof

body{
  margin: 0;
  height: 100vh;
  background: conic-gradient(from 180deg at right top, #204158 55deg,#16334a  55deg, #16334a 70deg, #0a253e 70deg);
}
.container {
 display:flex;
 align-items: center;
 margin: 0 auto;
 width:75vw;
 height:75vh;
}
#path1 {
fill:none;
stroke:#C9C9C9;
stroke-width:2;
stroke-dasharray:none;
}
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="-5 -2 630 190"  id="svg4">
   <path id="path1" d="M46.2 172.2H18.4c-4 0-16.3.3-16.7-23.5C1 106.9 1 71.7 1 23 1 10.7 9.7 3.4 18.4 3.4h582.7c8.3 0 15.3 11.3 15.3 19.6v125.2c0 9.5-5.8 24-15.3 24H67.3s-9.2 11.6-10.8 10.9a74.6 74.6 0 0 1-10.3-10.9Z"  />
</svg>
</div>

При желании можно сделать анимацию рисования контура c помощью stroke-dasharray и stroke-dashoffset

body{
  margin: 0;
  height: 100vh;
  background: conic-gradient(from 180deg at right top, #204158 55deg,#16334a  55deg, #16334a 70deg, #0a253e 70deg);
}
.container {
 display:flex;
 margin: 0 auto;
 width:75vw;
 height:75vh;
}
#path1 {
fill:none;
stroke:#C9C9C9;
stroke-width:2;
stroke-dasharray:1546;
stroke-dashoffset:1546;
animation:str 8s forwards;
}

@keyframes str {
to {stroke-dashoffset:0;}
}
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="-5 -2 630 190"  id="svg4">
   <path id="path1" d="M46.2 172.2H18.4c-4 0-16.3.3-16.7-23.5C1 106.9 1 71.7 1 23 1 10.7 9.7 3.4 18.4 3.4h582.7c8.3 0 15.3 11.3 15.3 19.6v125.2c0 9.5-5.8 24-15.3 24H67.3s-9.2 11.6-10.8 10.9a74.6 74.6 0 0 1-10.3-10.9Z"  />
</svg>
</div>

▲ 3

Другие примеры анимации

#1. Рисование контура двумя лучами из одной точки

Используется stroke-dasharray:0,773 0,773; которая делит линию длиной 1546px на два равных отрезка.

body{
  margin: 0;
  height: 100vh;
  background: conic-gradient(from 180deg at right top, #204158 55deg,#16334a  55deg, #16334a 70deg, #0a253e 70deg);
}
.container {
 display:flex;
 margin: 0 auto;
 width:75vw;
 height:75vh;
}
#path1 {
fill:none;
stroke:#C9C9C9;
stroke-width:4;
stroke-dasharray:0,773 0,773;
stroke-dashoffset:1;
animation:str 4s linear forwards ;
}

@keyframes str {
from {stroke-dasharray:0,773 0,773;}
to {stroke-dasharray:0,0 1546,0;}
}
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="-5 -2 630 190"  id="svg4">
   <path id="path1" d="M46.2 172.2H18.4c-4 0-16.3.3-16.7-23.5C1 106.9 1 71.7 1 23 1 10.7 9.7 3.4 18.4 3.4h582.7c8.3 0 15.3 11.3 15.3 19.6v125.2c0 9.5-5.8 24-15.3 24H67.3s-9.2 11.6-10.8 10.9a74.6 74.6 0 0 1-10.3-10.9Z"  />
</svg>
</div>

#2. Анимация нескольких черточек

Линия делится на несколько частей stroke-dasharray:75,10; и запускается вращение сдвигом stroke-dashoffset

body{
  margin: 0;
  height: 100vh;
  background: conic-gradient(from 180deg at right top, #204158 55deg,#16334a  55deg, #16334a 70deg, #0a253e 70deg);
}
.container {
 display:flex;
 margin: 0 auto;
 width:75vw;
 height:75vh;
}
#path1 {
fill:none;
stroke:#C9C9C9;
stroke-width:4;
stroke-dasharray:75,10;
stroke-dashoffset:1546;
animation:str 10s linear forwards infinite ;
}

@keyframes str {
to {stroke-dashoffset:0;}
}
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="-5 -2 630 190"  id="svg4">
   <path id="path1" d="M46.2 172.2H18.4c-4 0-16.3.3-16.7-23.5C1 106.9 1 71.7 1 23 1 10.7 9.7 3.4 18.4 3.4h582.7c8.3 0 15.3 11.3 15.3 19.6v125.2c0 9.5-5.8 24-15.3 24H67.3s-9.2 11.6-10.8 10.9a74.6 74.6 0 0 1-10.3-10.9Z"  />
</svg>
</div>

#3. Анимация двух черточек с большим расстоянием между ними

body{
  margin: 0;
  height: 100vh;
  background: conic-gradient(from 180deg at right top, #204158 55deg,#16334a  55deg, #16334a 70deg, #0a253e 70deg);
}
.container {
 display:flex;
 margin: 0 auto;
 width:75vw;
 height:75vh;
}
#path1 {
fill:none;
stroke:yellow;
stroke-width:4;
stroke-dasharray:43,730 43,730;
stroke-dashoffset:1546;
animation:str 8s linear forwards infinite ;
}

@keyframes str {
to {stroke-dashoffset:0;}
}
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="-5 -2 630 190"  id="svg4">
   <path id="trace" d="M46.2 172.2H18.4c-4 0-16.3.3-16.7-23.5C1 106.9 1 71.7 1 23 1 10.7 9.7 3.4 18.4 3.4h582.7c8.3 0 15.3 11.3 15.3 19.6v125.2c0 9.5-5.8 24-15.3 24H67.3s-9.2 11.6-10.8 10.9a74.6 74.6 0 0 1-10.3-10.9Z" fill="none" stroke="#1359A0" stroke-width="4"  />
   <path id="path1" d="M46.2 172.2H18.4c-4 0-16.3.3-16.7-23.5C1 106.9 1 71.7 1 23 1 10.7 9.7 3.4 18.4 3.4h582.7c8.3 0 15.3 11.3 15.3 19.6v125.2c0 9.5-5.8 24-15.3 24H67.3s-9.2 11.6-10.8 10.9a74.6 74.6 0 0 1-10.3-10.9Z"  />
</svg>
</div>

#4. Анимация объемного шарика по контуру

Используется animateMotion (после клика)

.container {
 display:flex;
 margin: 0 auto;
 width:100vw;
 height:100vh;
 background: #0000FF;
}
#path1 {
fill:none;
stroke:yellow;
stroke-width:4;
}
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"  
  viewBox="-25 -5 700 200"  id="svg1"> 
<defs>
<filter id="spot-light">
    <feGaussianBlur stdDeviation="2" result="blur" />
        <feSpecularLighting result="spec" in="blur" specularExponent="45" lighting-color="lime">
        <fePointLight z="25"></fePointLight>
    </feSpecularLighting>
    <feComposite in="SourceGraphic" in2="spec" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="comp1"/>
  </filter>
</defs>
  
   <path transform="scale(1)" id="trace" d="M46.2 172.2H18.4c-4 0-16.3.3-16.7-23.5C1 106.9 1 71.7 1 23 1 10.7 9.7 3.4 18.4 3.4h582.7c8.3 0 15.3 11.3 15.3 19.6v125.2c0 9.5-5.8 24-15.3 24H67.3s-9.2 11.6-10.8 10.9a74.6 74.6 0 0 1-10.3-10.9Z" fill="none" stroke="#529fd9" stroke-width="4"  />
  <circle cx="" cy="" r="25"  fill="blue" filter="url(#spot-light)">
    <animateMotion id="anL1" dur="5.5s" begin="svg1.click" repeatCount="1" fill="freeze" restart="whenNotActive">
      <mpath xlink:href="#trace"></mpath>
    </animateMotion>
  </circle> 
  </svg> 
  </div>

▲ 2

Ну, уголки закруглённые даёт свойство border-radius.
Обводка - свойство border.
А вот уголок снизу - без понятия. Может быть, он просто сверху наложен.