#css
Вопрос:
У меня есть элемент с градиентом на заднем плане. Я должен поместить над ним метку, с которой он разделяет градиент: при изменении размера экрана метка будет скользить по элементу ниже, но градиент должен оставаться неизменным.
На этом изображении вы можете увидеть стартовую структуру:
.container {
background: linear-gradient(100deg, rgb(162, 30, 30) 0%, rgb(27, 57, 172) 100%);
width: 100%;
height: 200px;
}
.element-1,
.element-2 {
height: 100px;
}
.label {
width: 300px;
height: 100%;
background-color: #fff;
position: relative;
left: 20%;
}
<div class="container">
<div class="element-1">
<div class="label">
</div>
</div>
<div class="element-2">
</div>
</div>
Это тот результат, который я хотел бы получить:
Именно так и должно быть с экраном узкой ширины:
Что мне нужно, так это «эффект маски»: я попробовал свойства css-клипа, путь к клипу, изображение маски, но я не смог сделать то, что мне нужно.
Единственное решение, которое я нашел, состояло в том, чтобы добавить псевдоэлементы с белым фоном до и после, чтобы покрыть все, кроме метки, но окончательный макет будет намного сложнее, чем в этом примере, и мне кажется довольно грязным решением (есть радиус границы, и мне пришлось добавить небольшие псевдоэлементы, чтобы также покрыть углы).
Ответ №1:
Вы можете попробовать, как показано ниже:
.container {
height: 200px;
position:relative;
z-index:0;
}
.element-2 {
height: 100px;
clip-path:inset(0);
}
.label {
display:inline-block;
padding:5px;
color: #fff;
margin-left: 20%;
clip-path:inset(0);
}
.label:before,
.element-2:before {
content:"";
position:absolute;
z-index:-1;
inset:0;
background: linear-gradient(100deg, rgb(162, 30, 30) 0%, rgb(27, 57, 172) 100%);
}
<div class="container">
<div class="label"> label here </div>
<div class="element-2">
</div>
</div>
Комментарии:
1. Спасибо, это прекрасно! Я перепробовал много способов, но это единственное решение, о котором я не думал. Я изменил вставку только на полигон, потому что мне нужны были закругленные края в верхней части метки (например, радиус границы).
2. @VinzClortho если вы хотите закруглить край, измените путь клипа с помощью маски:
-webkit-mask:linear-gradient(#fff 0 0)
а затем вы можете использовать радиус границы