Вопросы с меткой [clip-path]

Ещё никто не добавил руководство по использованию для метки , но есть описание этой метки.

Фильтрация
Сортировка
Метки
1 голос
1 ответ
47 показов

как сделать фигуры с закругленными углами с помощью clip и svg?

Все никак не могу сделать фигуры
Dias's user avatar
  • 45
0 голосов
1 ответ
17 показов

Как сделать полупрозрачную внутреннюю рамку у clip-pah элемента?

САБЖ: Есть дизайн у которого есть элементы со сложной формой в виде гексогона или ячейки сот. Внутри этого элемента есть имидж и иной контент. ПРОБЛЕМА: Необходимо сделать полупрозрачный, ...
Polina's user avatar
  • 336
1 голос
2 ответа
171 показ

Как вырезать картинку по форме контура SVG

Как наложить картинку на свг не стандартной формы. Что я имею ввиду есть вот такая СВГ <svg xmlns="http://www.w3.org/2000/svg" width="308" height="308" viewBox="0 0 308 308" fill="none"> <...
Jaroslaw's user avatar
  • 104
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, но она не появляется. Решил ...
Jessika's user avatar
  • 87
2 голоса
2 ответа
177 показов

SVG-файл clip-path

Я пытаюсь применить clip-path с моим файлом SVG к изображению. Я нашел пример, это именно то, что я пытаюсь сделать, но я не могу реализовать свой объект таким же образом. Также у меня есть файл svg, ...
Alexandr_TT's user avatar
3 голоса
1 ответ
35 показов

Разделитель SVG между двумя растровыми изображениями

Я пытаюсь создать разделитель SVG, который проходит между двумя растровыми изображениями. Я искал повсюду, и единственное, что мне подошло бы, вот этот ответ. Однако ответ зависит от использования ...
Alexandr_TT's user avatar
2 голоса
1 ответ
156 показов

Размытие SVG с четкими краями фигуры

Я пытаюсь создать размытие на элементе многоугольника SVG с помощью fegaussianblur. Вот что у меня получилось. <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="...
Alexandr_TT's user avatar
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%, ...
Alexandr_TT's user avatar
3 голоса
1 ответ
125 показов

clip-path подсказки с прозрачным фоном содержимого

Я создал clip-path подсказки с границей (очень важно). Теперь я пытаюсь сделать фон содержимого прозрачным. Вот мое текущее решение: .background { background: url(https://thumbs.dreamstime.com/...
Alexandr_TT's user avatar
1 голос
1 ответ
23 показа

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

Я пытаюсь добиться чего-то вроде этого: Мне нужно отобразить текст и изображение в двух частях треугольника, как показано на изображении выше. Пытался использовать clip-path, но текстовое содержимое ...
Alexandr_TT's user avatar
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 ...
Rick Hangover's user avatar
1 голос
1 ответ
55 показов

Как перемещать clip-path position за курсором мыши

У меня есть фигура SVG, которую я использую в качестве clip-path поверх изображения - фигура SVG должна следовать за положением мыши. Я могу заставить это работать, если использую clip-path: circle(), ...
Alexandr_TT's user avatar
1 голос
2 ответа
158 показов

Как я могу получить любую нестандартную форму с помощью свойства css clip-path?

Я пытаюсь получить форму, используя свойство многоугольника clip-path, но оно не работает должным образом, форма, которую я хочу создать, приведена ниже. Я пробовал следующий код, но он дает углам не ...
Alexandr_TT's user avatar
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/...
Alexandr_TT's user avatar
1 голос
1 ответ
66 показов

Как реализовать это силами CSS

Есть такие раскладки-сетки (блоки просто залиты разными цветами, что бы было понятно где какой блок) Разметка: <section class="block__main"> <div class="block__top"> ...
b1rd's user avatar
  • 23
3 голоса
3 ответа
121 показ

Как можно создатьCSS clip-path в виде флага?

Подскажите, пожалуйста, как можно создать clip-path (ну или любую другую маску) по форме флажка ? Не знаю как этот синусоидальный обвод сделать, что б он и сверху и снизу совпадал. body { ...
BlackStar1991's user avatar
3 голоса
2 ответа
117 показов

Как использовать обводку в качестве обтравочного контура в SVG?

У меня есть такой path: <path class="path" d="M0,550L0,366.6666666666667C0,366.6666666666667,95.43389463154384,198.61111111111114,143.31860620206734,183.33333333333337C191....
Alexandr_TT's user avatar
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'/> ...
cafeed's user avatar
  • 37
2 голоса
1 ответ
391 показ

Способы создания деформированных фигур на css

Всем привет! Есть задача замутить что то вроде такой фигуры: Не однократно натыкался на такие но все никак не доходили руки разобраться как их делать. Случайно нашел вот такой сайт https://...
Bublick's user avatar
  • 31
1 голос
1 ответ
193 показа

Почему не работает svg clip-path и mask в chrome?

В проекте хочу использовать svg-спрайты, но столкнулся с одной проблемой: Не работает SVG clip-path и mask в webkit-браузерах, в то время как в firefox все прекрасно работает. Файл svg (icon-sprite....
Nikolay Stepin's user avatar
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"&...
Denis's user avatar
  • 1,685
2 голоса
0 ответов
94 показа

Как сделать скошенный фон?

Меня очень заинтересовал вот этот вопрос о том, как можно сделать скошенный по диагонали фон. Я эту задачу реализовал двумя способами:с помощью псевдоэлементов :before или :after,а также с ...
Sevastopol''s user avatar
3 голоса
3 ответа
86 показов

Блок с неправильным треугольником с градиентной заливкой

Есть задача cверстать вот такой блок: Сложность в том, что фон градиентный и высота блока меняется. Первое, что приходит в голову это использовать clip-path. Вот что у меня получилось: ....
Григорий's user avatar
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" /> <...
Евгений Волков's user avatar
2 голоса
2 ответа
108 показов

Выпуклая картинка

Как реализовать такую форму обрезки изображения у тега <img> без использования after/before?
Js ученик's user avatar
4 голоса
1 ответ
490 показов

CSS блоки нестандартной формы

Верстаю уже давно, но такой блок первый раз вижу. Гуглил, не нашел там ничего особо. Как можно такое сверстать ?
bogdaryan's user avatar
3 голоса
3 ответа
828 показов

Не работает clip-path в IE 11.0.120

Всем привет! Много гуглил, пробовал. Не работает clip-path, не могу разобраться почему. Ниже прилагаю код, который воспроизводит мою проблему. Подскажите, пожалуйста, что я не так делаю? В Google ...
Mark Khromov's user avatar
1 голос
2 ответа
308 показов

Изменение цвета svg изображения по маске, загруженного в HTML с помощью <img>

Пытаюсь обтравить прямоугольник по маске SVG. проблема в том, что высота прямоугольника динамическая (от 0px до 32px), а SVG-изображение подгружается из файла (фигуры могут быть совершенно разные, ...
Vladimir Gonchar's user avatar
3 голоса
3 ответа
282 показа

Масштабируемый clipPath

Суть в том, что svg фигура в clipPath отрисовывается как есть, по тем самым размерам, с которыми создана. Есть ли способ, при котором обрезаемая область масштабировалась бы по размерам блока. ....
Amsterdam's user avatar
  • 546
7 голосов
3 ответа
803 показа

Responsive clip-path

В следующем примере блок main (синезелёный градиент) обрезается при помощи clip-path и принимает форму сердечка. Однако видно, что он обрезается в масштабе 1:1, а хотелось бы, чтобы форма обрезки ...
Qwertiy's user avatar
  • 121k
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-...
Amsterdam's user avatar
  • 546
2 голоса
3 ответа
232 показа

Как заключить background-image в красный фон данного svg

есть такой файл в формате svg. Как задать, чтобы красная часть данного svg была заполнена картиной. CodePen <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/...
Dan's user avatar
  • 2,151
4 голоса
1 ответ
247 показов

CSS - Как размыть маску SVG?

Я пытался размыть SVG clip-path. Пробовал разные решения, но ни одно не помогло. Я не уверен, есть ли другое решение, кроме фильтра. Pseudocode SVG clip-path должен раскрывать текст ниже ...
Alexandr_TT's user avatar
4 голоса
3 ответа
254 показа

Превратить CSS clip-path со смешанными (фиксированными и процентными) значениями в SVG clip-path

Есть картинка карточки с градиентом и обрезанным уголком, полученным с помощью clip-path: .card { width: 200px; height: 200px; background: linear-gradient(to bottom, blue, green); ...
Vadim Ovchinnikov's user avatar
2 голоса
1 ответ
228 показов

SVG маска для изображения (clip path css)

помогите найти маску SVG, чтобы с помощь clip path и css сделать прямоугольное изображение вот таким, важно именно то, чтобы все углы были острые как на картинке, размеры этого блока могут быть ...
WebSiteCoder's user avatar
3 голоса
1 ответ
248 показов

Можно сделать треугольник в CSS?

Нужно нарисовать треугольник на CSS. Способы которые описаны в статьях используют border, визуально они как треугольник, но внутри нельзя поместить элементы. Можно сделать треугольник но чтобы внутри ...
Valeriu Vodnicear's user avatar
10 голосов
2 ответа
1k показов

Сделать вырез на css

Пытаюсь вырезать буквы в div на чистом CSS, использую — clip-path, но полностью вырезать не получается. body { background: #262626; } .education-feedback { padding: 100px 0; ...
sergey - dev's user avatar
4 голоса
1 ответ
4k показов

Как сделать скошенный угол у прямоугольника?

Необходимо карточке, с border'ом и фоном (всё на css), сделать срез у верхнего левого угла и, чтобы у него был такой же border. Пробовал clip-path. Возможно нужно использовать псевдоэлемент или SVG? ....
Dmitry's user avatar
  • 45
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%; ...
bad code's user avatar
  • 886
8 голосов
2 ответа
128 показов

Есть ли способ на css это реализовать более красиво?

Увидел на просторах интернета вот такой эффект для текста на svg, и судя по названию понял что этот эффект называется слешед. Решил его реализовать на чистом css без вкусного svg и вот что ...
user avatar
3 голоса
2 ответа
163 показа

Как сделать такой эффект как на скриншоте с эффектом смещения?

Хотелось бы реализовать такой эффект как на скрине : Разумеется хотя бы с 90% поддержкой но как можно проще. Как это можно реализовать ?
user avatar
4 голоса
3 ответа
621 показ

Картинка и clip-path

Помогите обрезать изображение в форме "волны" с помощью clip-path. Внизу пример как хотелось бы.
Mimzik's user avatar
  • 95
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); Есть ли программы или сервисы в которых можно нарисовать такое ? Нашел два сервиса , но оба ...
Серега Он's user avatar
4 голоса
3 ответа
394 показа

Как создать блок дугой? (с картинкой - примером) [дубликат]

Как создать блок дугой (внутрь блока) (потратил 5 часов на решение задачи и не нашел ответа). Пользуюсь WordPress/css. Пример
Серега Он's user avatar
1 голос
2 ответа
657 показов

safari игнорирует clip path

сверстал сайт. активно пользовался clip-path + svg. а потом посмотрел в safari, а там все clip-path игнорированы. даже не смотря на -webkit- префикс и transform: translateZ(0). .header { ...
Skeris Jaghoot's user avatar
3 голоса
3 ответа
119 показов

Как сохранить стили элементов, обрезанных с помощью clipPath в svg?

Не могу разобраться с одной проблемой. Я рисую различные элементы : геометрические фигуры, текст и прочее используя svg. Данные о том какие элементы отрисовывать берутся динамически из БД. Область в ...
astonone's user avatar
3 голоса
1 ответ
366 показов

Как создать такие скошенные углы

Как создать такие скошенные углы при помощи svg clipPath?
brin gonor's user avatar
3 голоса
2 ответа
2k показов

Угол под 45 градусов у div

Друзья, может кто-то сталкивался с подобной задачей... Необходимо у div срезать углы (верхний-левый и нижний правый), под углом 45 градусов. реализовал через clip-path .corner45top { -webkit-...
CryptoWorks's user avatar
3 голоса
1 ответ
102 показа

Свойство clip-path через свой path

Добрый день уважаемые. Подскажите, пожалуйста как запускать данное свойство по лично нарисованному пути? (Почему то не выходит, хотя на простых фигурах хорошо отрабатывает) Приведу простой пример ...
BlackStar1991's user avatar
4 голоса
2 ответа
925 показов

Маскирование фонов CSS

Добрый день уважаемые. Подскажите как реализовать маскирование фонов в CSS ? Необходимо добиться что б на выходе получить красный круг (5штук) с чёрным обводом. Эффект как-будто в диве с классом el ...
BlackStar1991's user avatar