Вопросы с меткой [clip-path]
Ещё никто не добавил руководство по использованию для метки clip-path, но есть описание этой метки.
53
вопроса
1
голос
1
ответ
47
показов
как сделать фигуры с закругленными углами с помощью clip и svg?
Все никак не могу сделать фигуры
0
голосов
1
ответ
17
показов
Как сделать полупрозрачную внутреннюю рамку у clip-pah элемента?
САБЖ:
Есть дизайн у которого есть элементы со сложной формой в виде гексогона или ячейки сот. Внутри этого элемента есть имидж и иной контент.
ПРОБЛЕМА:
Необходимо сделать полупрозрачный, ...
1
голос
2
ответа
171
показ
Как вырезать картинку по форме контура SVG
Как наложить картинку на свг не стандартной формы. Что я имею ввиду есть вот такая СВГ
<svg xmlns="http://www.w3.org/2000/svg" width="308" height="308" viewBox="0 0 308 308" fill="none">
<...
2
голоса
2
ответа
64
показа
Добавить к clip-path box-shadow
Нужно создать вот такой элемент на css
Создал через clip-path: clip-path: polygon(10% 20%, 0 10%, 0 0, 100% 0, 100% 100%, 0 100%, 0 30%);. Начал добавлять box-shadow, но она не появляется. Решил ...
2
голоса
2
ответа
177
показов
SVG-файл clip-path
Я пытаюсь применить clip-path с моим файлом SVG к изображению. Я нашел пример, это именно то, что я пытаюсь сделать, но я не могу реализовать свой объект таким же образом. Также у меня есть файл svg, ...
3
голоса
1
ответ
35
показов
Разделитель SVG между двумя растровыми изображениями
Я пытаюсь создать разделитель SVG, который проходит между двумя растровыми изображениями. Я искал повсюду, и единственное, что мне подошло бы, вот этот ответ.
Однако ответ зависит от использования ...
2
голоса
1
ответ
156
показов
Размытие SVG с четкими краями фигуры
Я пытаюсь создать размытие на элементе многоугольника SVG с помощью fegaussianblur. Вот что у меня получилось.
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="...
4
голоса
2
ответа
404
показа
Как вырезать круг внутри фигуры?
-webkit-clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);
clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, ...
3
голоса
1
ответ
125
показов
clip-path подсказки с прозрачным фоном содержимого
Я создал clip-path подсказки с границей (очень важно). Теперь я пытаюсь сделать фон содержимого прозрачным.
Вот мое текущее решение:
.background {
background: url(https://thumbs.dreamstime.com/...
1
голос
1
ответ
23
показа
Перенос текстового содержимого внутри треугольника, обрезанного на другой половине изображения
Я пытаюсь добиться чего-то вроде этого:
Мне нужно отобразить текст и изображение в двух частях треугольника, как показано на изображении выше. Пытался использовать clip-path, но текстовое содержимое ...
2
голоса
1
ответ
127
показов
Уменьшение изображения с svg маской
img{width:320px;clip-path:path('M315.001 6.24132e-06H5.00202C2.2578 6.24132e-06 0.0102067 2.24165 0.00226772 4.9853C0.00226772 4.99012 0.00226772 4.99579 0.00226772 4.99976L0 78.4571C42.071 106.567 ...
1
голос
1
ответ
55
показов
Как перемещать clip-path position за курсором мыши
У меня есть фигура SVG, которую я использую в качестве clip-path поверх изображения - фигура SVG должна следовать за положением мыши.
Я могу заставить это работать, если использую clip-path: circle(), ...
1
голос
2
ответа
158
показов
Как я могу получить любую нестандартную форму с помощью свойства css clip-path?
Я пытаюсь получить форму, используя свойство многоугольника clip-path, но оно не работает должным образом, форма, которую я хочу создать, приведена ниже.
Я пробовал следующий код, но он дает углам не ...
3
голоса
1
ответ
121
показ
Как создать форму с помощью HTML Div и CSS?
Я хочу создать такую html-страницу
Я сделал это с помощью svg, вот мой код:
<body>
<div style="width: 100%; background-image: url('https://t4.ftcdn.net/jpg/01/25/20/05/...
1
голос
1
ответ
66
показов
Как реализовать это силами CSS
Есть такие раскладки-сетки (блоки просто залиты разными цветами, что бы было понятно где какой блок)
Разметка:
<section class="block__main">
<div class="block__top">
...
3
голоса
3
ответа
121
показ
Как можно создатьCSS clip-path в виде флага?
Подскажите, пожалуйста, как можно создать clip-path (ну или любую другую маску) по форме флажка ?
Не знаю как этот синусоидальный обвод сделать, что б он и сверху и снизу совпадал.
body {
...
3
голоса
2
ответа
117
показов
Как использовать обводку в качестве обтравочного контура в SVG?
У меня есть такой path:
<path class="path" d="M0,550L0,366.6666666666667C0,366.6666666666667,95.43389463154384,198.61111111111114,143.31860620206734,183.33333333333337C191....
0
голосов
0
ответов
33
показа
css clip-path двигается с div
У меня есть код HTML
<div class='content'>
<svg width='0' height='0'>
<clipPath id='mask'>
<polygon points='200 200,600 200,600 0,200 0'/>
...
2
голоса
1
ответ
391
показ
Способы создания деформированных фигур на css
Всем привет! Есть задача замутить что то вроде такой фигуры:
Не однократно натыкался на такие но все никак не доходили руки разобраться как их делать. Случайно нашел вот такой сайт https://...
1
голос
1
ответ
193
показа
Почему не работает svg clip-path и mask в chrome?
В проекте хочу использовать svg-спрайты, но столкнулся с одной проблемой:
Не работает SVG clip-path и mask в webkit-браузерах, в то время как в firefox все прекрасно работает.
Файл svg (icon-sprite....
0
голосов
1
ответ
44
показа
Залить фигуру SVG фотографией
Фот есть такая SVG фигура, но в ней нет картинки получается только черный фон.
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="387px" height="345px"&...
2
голоса
0
ответов
94
показа
Как сделать скошенный фон?
Меня очень заинтересовал вот этот вопрос о том, как можно сделать скошенный по диагонали фон.
Я эту задачу реализовал двумя способами:с помощью псевдоэлементов :before или :after,а также с ...
3
голоса
3
ответа
86
показов
Блок с неправильным треугольником с градиентной заливкой
Есть задача cверстать вот такой блок:
Сложность в том, что фон градиентный и высота блока меняется.
Первое, что приходит в голову это использовать clip-path.
Вот что у меня получилось:
....
3
голоса
1
ответ
570
показов
Как сделать svg mask для видео?
<svg viewBox="0 0 1400 1050" preserveAspectRatio="xMinYMin meet">
<defs>
<mask id='mask'>
<rect x="0" y="0" width="100%" height="100%" fill="#2A2A2A" />
<...
2
голоса
2
ответа
108
показов
Выпуклая картинка
Как реализовать такую форму обрезки изображения у тега <img> без использования after/before?
4
голоса
1
ответ
490
показов
CSS блоки нестандартной формы
Верстаю уже давно, но такой блок первый раз вижу. Гуглил, не нашел там ничего особо. Как можно такое сверстать ?
3
голоса
3
ответа
828
показов
Не работает clip-path в IE 11.0.120
Всем привет!
Много гуглил, пробовал. Не работает clip-path, не могу разобраться почему.
Ниже прилагаю код, который воспроизводит мою проблему. Подскажите, пожалуйста, что я не так делаю? В Google ...
1
голос
2
ответа
308
показов
Изменение цвета svg изображения по маске, загруженного в HTML с помощью <img>
Пытаюсь обтравить прямоугольник по маске SVG. проблема в том, что высота прямоугольника динамическая (от 0px до 32px), а SVG-изображение подгружается из файла (фигуры могут быть совершенно разные, ...
3
голоса
3
ответа
282
показа
Масштабируемый clipPath
Суть в том, что svg фигура в clipPath отрисовывается как есть, по тем самым размерам, с которыми создана.
Есть ли способ, при котором обрезаемая область масштабировалась бы по размерам блока.
....
7
голосов
3
ответа
803
показа
Responsive clip-path
В следующем примере блок main (синезелёный градиент) обрезается при помощи clip-path и принимает форму сердечка. Однако видно, что он обрезается в масштабе 1:1, а хотелось бы, чтобы форма обрезки ...
5
голосов
3
ответа
982
показа
Как создать криволинейную форму clipPath
Для обрезки изображения используется clipPath
//HTML
<span class="clip-svg-inline2">
<img src="templates/img/case-4.jpg" alt="">
</span>
//CSS
.clip-svg-inline2 {
-webkit-...
2
голоса
3
ответа
232
показа
Как заключить background-image в красный фон данного svg
есть такой файл в формате svg. Как задать, чтобы красная часть данного svg была заполнена картиной.
CodePen
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/...
4
голоса
1
ответ
247
показов
CSS - Как размыть маску SVG?
Я пытался размыть SVG clip-path.
Пробовал разные решения, но ни одно не помогло.
Я не уверен, есть ли другое решение, кроме фильтра.
Pseudocode
SVG clip-path должен раскрывать текст ниже
...
4
голоса
3
ответа
254
показа
Превратить CSS clip-path со смешанными (фиксированными и процентными) значениями в SVG clip-path
Есть картинка карточки с градиентом и обрезанным уголком, полученным с помощью clip-path:
.card {
width: 200px;
height: 200px;
background: linear-gradient(to bottom, blue, green);
...
2
голоса
1
ответ
228
показов
SVG маска для изображения (clip path css)
помогите найти маску SVG, чтобы с помощь clip path и css сделать прямоугольное изображение вот таким, важно именно то, чтобы все углы были острые как на картинке, размеры этого блока могут быть ...
3
голоса
1
ответ
248
показов
Можно сделать треугольник в CSS?
Нужно нарисовать треугольник на CSS.
Способы которые описаны в статьях используют border, визуально они как треугольник, но внутри нельзя поместить элементы.
Можно сделать треугольник но чтобы внутри ...
10
голосов
2
ответа
1k
показов
Сделать вырез на css
Пытаюсь вырезать буквы в div на чистом CSS, использую — clip-path, но полностью вырезать не получается.
body {
background: #262626;
}
.education-feedback {
padding: 100px 0;
...
4
голоса
1
ответ
4k
показов
Как сделать скошенный угол у прямоугольника?
Необходимо карточке, с border'ом и фоном (всё на css), сделать срез у верхнего левого угла и, чтобы у него был такой же border. Пробовал clip-path. Возможно нужно использовать псевдоэлемент или SVG?
....
0
голосов
1
ответ
53
показа
Нужна помощь с clippath
section.p7 {
background: #000;
width: 100%;
height: 1000px;
}
section.p7 a {
width: 307px;
height: 94px;
line-height: 94px;
position: relative;
top: 100px;
left: 50%;
...
8
голосов
2
ответа
128
показов
Есть ли способ на css это реализовать более красиво?
Увидел на просторах интернета вот такой эффект для текста на svg, и судя по названию понял что этот эффект называется слешед.
Решил его реализовать на чистом css без вкусного svg
и вот что ...
3
голоса
2
ответа
163
показа
Как сделать такой эффект как на скриншоте с эффектом смещения?
Хотелось бы реализовать такой эффект как на скрине :
Разумеется хотя бы с 90% поддержкой но как можно проще.
Как это можно реализовать ?
4
голоса
3
ответа
621
показ
Картинка и clip-path
Помогите обрезать изображение в форме "волны" с помощью clip-path. Внизу пример как хотелось бы.
4
голоса
1
ответ
587
показов
Как нарисовать через css clip-path (или другим способом) ровную дугу внутрь блока?
Сейчас у меня стоит clip-path: polygon(50% 0%, 100% 0, 100% 100%, 70% 90%, 44% 87%, 23% 91%, 0 99%, 0 0);
Есть ли программы или сервисы в которых можно нарисовать такое ?
Нашел два сервиса , но оба ...
4
голоса
3
ответа
394
показа
Как создать блок дугой? (с картинкой - примером) [дубликат]
Как создать блок дугой (внутрь блока) (потратил 5 часов на решение задачи и не нашел ответа).
Пользуюсь WordPress/css.
Пример
1
голос
2
ответа
657
показов
safari игнорирует clip path
сверстал сайт. активно пользовался clip-path + svg. а потом посмотрел в safari, а там все clip-path игнорированы. даже не смотря на -webkit- префикс и transform: translateZ(0).
.header {
...
3
голоса
3
ответа
119
показов
Как сохранить стили элементов, обрезанных с помощью clipPath в svg?
Не могу разобраться с одной проблемой.
Я рисую различные элементы : геометрические фигуры, текст и прочее используя svg.
Данные о том какие элементы отрисовывать берутся динамически из БД.
Область в ...
3
голоса
1
ответ
366
показов
Как создать такие скошенные углы
Как создать такие скошенные углы при помощи svg clipPath?
3
голоса
2
ответа
2k
показов
Угол под 45 градусов у div
Друзья, может кто-то сталкивался с подобной задачей...
Необходимо у div срезать углы (верхний-левый и нижний правый), под углом 45 градусов.
реализовал через clip-path
.corner45top {
-webkit-...
3
голоса
1
ответ
102
показа
Свойство clip-path через свой path
Добрый день уважаемые. Подскажите, пожалуйста как запускать данное свойство по лично нарисованному пути? (Почему то не выходит, хотя на простых фигурах хорошо отрабатывает)
Приведу простой пример
...
4
голоса
2
ответа
925
показов
Маскирование фонов CSS
Добрый день уважаемые. Подскажите как реализовать маскирование фонов в CSS ?
Необходимо добиться что б на выходе получить красный круг (5штук) с чёрным обводом. Эффект как-будто в диве с классом el ...