Треугольник после заголовка, соответствующий градиенту фона заголовка

Мне нужно сделать такой заголовок:

Заголовок

У меня нет проблем с созданием заголовка с этим градиентом. Я также знаю, как расположить треугольник с ::after. Однако как сделать так, чтобы цвет треугольника соответствовал фону заголовка? Проблема в том, что градиент не статичен. Например, если я открываю страницу на смартфоне, поскольку экран короче, градиент будет более «компактным», чем при открытии на мониторе. Таким образом, цвет стрелки не может быть статичным. Понятия не имею, как я мог это сделать, может кто-нибудь мне помочь? Спасибо.


css linear-gradients
person Mateus Felipe    schedule 02.04.2018    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Вы можете использовать clip-path, чтобы замаскировать заголовок:

header {
  height: 70px;
  width: 100%;
  clip-path: polygon(0 0, 100% 0, 100% 60px, calc(100% - 40px) 60px, calc(100% - 60px) 70px, calc(100% - 80px) 60px, 0 60px);
  background-image: linear-gradient(to right, #3f5efb, #fc466b);
}
<header></header>

С помощью этой опции вам нужно будет предоставить резервные варианты для браузеров, которые не поддерживают clip-path.

person chazsolo    schedule 02.04.2018

arrow_upward
1
arrow_downward

Вот еще одна идея, более поддерживаемая без использования clip-path:

.box {
  height:50px;
  background:linear-gradient(to right,purple,red);
  background-attachment:fixed; /*This will do the magic*/
  position:relative;
}
.box:before {
  content:"";
  position:absolute;
  width:20px;
  height:20px;
  background:linear-gradient(to right,purple,red);
  background-attachment:fixed; /*This will do the magic*/
  transform:rotate(45deg);
  right:20px;
  bottom:-10px;
  animation:slide 5s infinite alternate linear;
}

@keyframes slide {
  from {
     right:20px;
  }
  to {
    right:calc(100% - 40px);
  }
}
<div class="box"></div>

ОБНОВЛЕНИЕ

Вышеупомянутое решение не работает с Firefox из-за ошибки с background-attachment:fixed и использования transform. Вот еще одна идея, которая должна сработать:

.box {
  height:50px;
  background:linear-gradient(to right,purple,red);
  background-attachment:fixed; /*This will do the magic*/
  position:relative;
}
.box:before {
  content:"";
  position:absolute;
  width:20px;
  height:10px;
  background:
  linear-gradient(to right,purple,red);
  background-attachment:fixed; /*This will do the magic*/
  right:20px;
  bottom:-10px;
  animation:slide 5s infinite alternate linear;
}
.box:after {
  content:"";
  position:absolute;
  z-index:2;
  width:20px;
  height:10px;
  background:
  linear-gradient(to bottom right,transparent 50%,white 51%)100% 0/50% 100% no-repeat,
  linear-gradient(to bottom left,transparent 50%,white 51%)0 0/50% 100% no-repeat;
  right:20px;
  bottom:-10px;
  animation:slide 5s infinite alternate linear;
}

@keyframes slide {
  from {
     right:20px;
  }
  to {
    right:calc(100% - 40px);
  }
}
<div class="box"></div>

person Temani Afif    schedule 02.04.2018
comment
Что ж, здесь не сработало. Алмазный градиент статичен. - person Mateus Felipe; 02.04.2018
comment
@MateusFelipe, что ты используешь? - person Temani Afif; 02.04.2018
comment
Firefox 59.0.2. - person Mateus Felipe; 02.04.2018
comment
@MateusFelipe правда ... в хроме он работает нормально ... может быть, мы обнаружили ошибку :) рассмотрим это ... похоже, это связано с преобразованием - person Temani Afif; 02.04.2018
comment
@MateusFelipe ну, кажется, проблема в знании stackoverflow.com/questions/39633745/ ... в конце концов, мое решение больше не поддерживалось: p ... но я найду решение;) - person Temani Afif; 02.04.2018