Обрезка блоков в html
Как обрезать блоки так, как это показано на картинке? Я делал это через градиенты, но он получился не особо функциональным.
Отслеживать
задан 30 мая 2016 в 21:57
Tyler Maning Tyler Maning
313 1 1 золотой знак 3 3 серебряных знака 14 14 бронзовых знаков
Уточните, пожалуйста, что значит обрезать? Непонятно, что имеется ввиду.
30 мая 2016 в 22:26
Блок с цифрой обрезан в форме пятиугольника и необходимо сделать что-то подобное
30 мая 2016 в 22:27
Статья вам в помощь Геометрические фигуры на CSS
31 мая 2016 в 0:03
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Идея следующая: создаётся прямоугольник с нужным содержимым, к нему псевдоэлементом добавляется треугольник с нужной стороны. Строится треугольник через свойство border — длина бордера на каждой стороне форму треугольника.
В примере ниже выделил разными цветами для наглядности:
.main < width: 100px; height: 50px; background: tomato; /* основной цвет заливки фона */ >.main:after < content: ''; position: relative; top: 0; left: 100px; display: block; width: 0px; height: 0px; border: 25px solid transparent; border-left-color: pink; /* основной цвет заливки фона */ >Отслеживать
ответ дан 31 мая 2016 в 7:10
5,542 2 2 золотых знака 20 20 серебряных знаков 41 41 бронзовый знак
- css
- html5
- css3
- html
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Как обрезать блоки с помощью CSS?
Вот есть 3 блока, два с верху и один с низу, два верхних обрезают нижний, а линия между ними это border, при наводке на любой блок, фон увеличивается, я никак не могу придумать как обрезать.
Отслеживать
задан 21 мая 2016 в 20:13
95 1 1 золотой знак 1 1 серебряный знак 10 10 бронзовых знаков
опишите подробнее, что происходит по наводке, как именно увеличивается фон
21 мая 2016 в 20:41
фон(изображение) увеличивается по центру, я пробовал блоки transform:skew наклонять, но это не то, может какие то идее есть.
21 мая 2016 в 21:23
на вскидку приходит идея сделать на canvas блоки, и тогда если у блока будет overflow: hidden всё будет обрезаться как надо
21 мая 2016 в 21:29
Я тоже подумал об этом, пробовал еще skew’ом наклонять блоки, а внутренний блок повернуть обратно, только вот border не выходит. Думал еще clip-path использовать, но тут напрочь можно забыть про поддержку старых браузеров
21 мая 2016 в 21:33
codepen.io/anon/pen/mPNEex?editors=0100 это я не доделал ещё
22 мая 2016 в 16:28
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
Предлагаю никак не обрезать.
html
для создания нижнего блока в виде ромба, достаточно повернуть прямоугольный или квадратный блок под 45%, при этом родительскому блоку выставить overflow: hidden .
.parent < overflow: hidden; >.child
Т.к. разворот под 45 градусов, предпалагет разворот и внутренного содержимого под 45, то внут. содержимое нужно развернуть под 45 градусов в обратном направлении.
.child < transform: rotate(45deg); >.child__inner
изображение
Изображения при этом никак особенно обрезать не надо, желательно что бы оно было достаточно большое, для компенсации зума.
недостатки
Приходится вручную подгонять координаты ромба и внут. содержимого.
Для html и css используются препроцессоры jade и stylus соотвественно. Если с ними не знакомы, там в каждом блоке есть кнопка View Compiled
как обрезать блок под карты
поступил такой заказ сделать карту на основе yandex map api по макету — карту импортировал подключил , теперь как обрезать её ? вырезать часть карты как показано в yandex песочнице не подойдёт так как — во первых мне нужно получить москву в зуме как показано на макете , а во вторых при зуме карта не сохраняет обрезаность. я думаю над тем что бы блоку к которому загружается карта сделать фиксированую ширину + высоту и добавить overflow:hidden , а сам блок обрезать по точкам в форме как показано на макете. можете подсказать как это сделать ? или у вас есть другое решения для реализации ?
Отслеживать
задан 17 мая 2022 в 5:29
31 5 5 бронзовых знаков
А нельзя сделать карту в svg, разбить на участки?
17 мая 2022 в 7:05
@Arcadiy, +1 согласен 🙂
17 мая 2022 в 7:08
карта должна быть активной (перемещения , зум , при нажатии ставить точки , и также при нажатии на объекты они должны забиватся в навигационую панель) тому я не думаю что карта в svg справится с этим )
18 мая 2022 в 1:20
я вот ещё думаю над вариантом наложить маску которая будет прозрачная но за границами будет скрывать всё
18 мая 2022 в 1:23
@GetWorld каким образом форма маски будет у вас меняться при перемещении по карте и при зуме?
Обрезать нижнюю часть блока
Есть блок определенной высоты. Как мне обрезать нижнюю часть блока на 50px (содержимое блока, которое входит в эти 50px, должно быть обрезано)? Возможно как-то затенить нижнюю часть блока или еще какие-нибудь варианты?
Отслеживать
задан 12 авг 2018 в 15:21
Пожалуйста, приведите наглядный пример.
12 авг 2018 в 15:25
Да просто обрезать низ блока на 50px. Зачем пример?
12 авг 2018 в 15:26
Пример для того, чтобы люди поняли что вы имеете ввиду под словом «обрезать»
12 авг 2018 в 15:36
Покажите код на jsfiddle
12 авг 2018 в 15:49
0
Сортировка: Сброс на вариант по умолчанию
Знаете кого-то, кто может ответить? Поделитесь ссылкой на этот вопрос по почте, через Твиттер или Facebook.
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.