Как обрезать угол в css
Перейти к содержимому

Как обрезать угол в css

  • автор:

Обрезать углы border CSS

Как обрезать углы у border на css?

Каким методом можно обрезать углы у border на css. Или лучше через canvas, но все же мне кажется что бы без заморочек делать каждую отдельную на canvase, лучше на css??И кстати задний фон меняющийся, вставкой псевдоэлемента треугольника не катит.

Отслеживать
задан 20 апр 2017 в 6:41
Костя Абрамкин Костя Абрамкин
11 1 1 серебряный знак 2 2 бронзовых знака

4 ответа 4

Сортировка: Сброс на вариант по умолчанию

.wrapper < position: relative; margin: 50px; width: 100px; height: 40px; line-height: 40px; font-family: Roboto, sans-serif; font-size: 16px; font-weight: bold; text-align: center; border-top: 2px solid #f00; border-bottom: 2px solid #f00; transform-origin: 50% 100% 0; transform: rotate(270deg); >.wrapper::before, .wrapper::after < position: absolute; content: ''; width: 15px; height: 27px; >.wrapper::before < left: -15px; bottom: -2px; border-left: 2px solid #f00; border-bottom: 2px solid #f00; >.wrapper::after < right: -15px; top: -2px; border-top: 2px solid #f00; border-right: 2px solid #f00; >.corner < position: absolute; width: 21px; height: 21px; transform: 50% 50% 0; transform: rotate(45deg); >.left < top: 3px; left: -11px; border-left: 2px solid #f00; >.right
ГЛАВНАЯ

Отслеживать
ответ дан 20 апр 2017 в 8:16
6,161 3 3 золотых знака 20 20 серебряных знаков 38 38 бронзовых знаков

Писал же, что присутствует задний фон, наложить треугольники из псевдоэлементов не то..В общем решил сделать и отрисовать и на svg, так как лучше выхода не вижу

20 апр 2017 в 8:23

@КостяАбрамкин во-первых: там нет треугольников из псевдоэлементов, во-вторых: в чем проблема изменить фон в моем примере?

20 апр 2017 в 10:19
да спасибо, недопонял
20 апр 2017 в 10:36

Привет, ты можешь это сделать через css. Используя border-radius можно задавть уровень скругления каждого угла отдельно.

border-radius: 30px 0px 30px 0px; 
border-top-left-radius:30px; border-top-right-radius:0; border-bottom-right-radius:30px; border-bottom-left-radius:0; 

Отслеживать
ответ дан 20 апр 2017 в 8:06
Roman Stepanov Roman Stepanov
border-radius не подойдет, посмотрите изображение
20 апр 2017 в 8:09
ну это же не то совсем..border-radius отпало же сразу
20 апр 2017 в 8:17
@soledar10, да, я не заметил что углы острые, в таком случае есть вариант описаный здесь, вот пример
20 апр 2017 в 8:23

* < padding: 0; margin: 0; box-sizing: border-box; >body < height: 100vh; font-size: 1.25rem; padding: 1rem; font-family: 'Segoe UI', sans-serif; background: linear-gradient(to bottom, rgba(4, 34, 66, 1) 0%, rgba(11, 93, 181, 1) 100%); >.btn < position: relative; margin: 30px 0; display: inline-block; vertical-align: top; padding: 8px 25px; color: #A6B0BB; text-transform: uppercase; text-decoration: none; -webkit-transform: rotate(-90deg) translate3d( 0, 0, 0); transform: rotate(-90deg) translate3d( 0, 0, 0); transition: .3s; >.btn:before, .btn:after, .btn>span:nth-of-type(1):before, .btn>span:nth-of-type(1):after, .btn>span:nth-of-type(2):before, .btn>span:nth-of-type(2):after < content: ''; position: absolute; background: rgba(255, 255, 255, .3); transition: .3s; >.btn:before, .btn:after < width: calc(100% - 15px); height: 2px; >.btn:before < top: 0; left: 15px; >.btn:after < bottom: 0; left: 0; >.btn>span < position: absolute; top: 0; left: 0; width: 100%; height: 100%; >.btn>span:nth-of-type(1):before, .btn>span:nth-of-type(1):after < height: calc(100% - 15px); width: 2px; >.btn>span:nth-of-type(1):before < top: 15px; left: 0; >.btn>span:nth-of-type(1):after < top: 0; right: 0; >.btn>span:nth-of-type(2):before, .btn>span:nth-of-type(2):after < height: 22px; width: 2px; -webkit-transform: rotate(45deg); transform: rotate(45deg); >@-moz-document url-prefix() < .btn>span:nth-of-type(2):before, .btn>span:nth-of-type(2):after < width: 2.5px; >> .btn>span:nth-of-type(2):before < top: -3px; left: 7px; >.btn>span:nth-of-type(2):after < bottom: -3px; right: 7px; >.btn:hover < color: #fff; >.btn:hover:before, .btn:hover:after, .btn:hover>span:nth-of-type(1):before, .btn:hover>span:nth-of-type(1):after, .btn:hover>span:nth-of-type(2):before, .btn:hover>span:nth-of-type(2):after

Обрезанный угол у блока с границей

Author24 — интернет-сервис помощи студентам

как сделать, чтоб изображения исчезали за границей блока
Подскажите, как сделать, чтоб изображния не выходили за область блока window? А пропадали сразу же.

Промежуток между содержимым блока и нижней границей (не прописано в css)
Остается промежуток между картинкой в блоке и нижней границей блока, в css никаких отступов не.

Как выровнять текст по центру между верхней и нижней границей блока div?
Собственно, как выровнять текст по центру между верхней и нижней границей блока div?

Абсолютно позиционированный блок опустить так, чтобы его середина совпадала с нижней границей другого блока
Всем добрый вечер. Нужно, чтобы середина блока discount_head_cont совпадала с нижней границей.

238 / 161 / 67
Регистрация: 18.06.2016
Сообщений: 509

Что то кроме псевдоэлемента на ум ничего не приходит. clip-patch не подойдет так как там border не пройдет по его контуру

Регистрация: 24.02.2016
Сообщений: 12
Вот такое решение выходит в итоге:

1 2 3 4 5 6 7 8 9 10
.block:after { content: ""; height: 30px; width: 100%; z-index: 0; position: relative; display: block; background: linear-gradient(130deg, transparent 59.9%, #fff 60%); margin-top: -30px; }

Эксперт JSЭксперт HTML/CSS

3825 / 2675 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4

Лучший ответ

Сообщение было отмечено gogolik как решение

Решение

1 2 3
div class="block"> Lorem, ipsum. /div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
body { padding: 20px; } .block { position: relative; width: 100px; height: 100px; padding-left: 25px; border-right: 2px solid black; overflow: hidden; } .block:after { content: ""; position: absolute; width: calc(100% - 1px); right: 0; z-index: -1; height: 20%; top: 0px; border-style: solid; border-width: 2px 0 0px 3px; transform: skew(-45deg); transform-origin: left bottom; } .block:before { content: ""; position: absolute; width: calc(100% - 2px); right: 0px; z-index: -1; height: calc(80% - 2px); bottom: 0px; border-style: solid; border-color: black; border-width: 0px 0 2px 2px; }

87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь

Срезать угол у блока
Знает кто нибудь как один угол у блока сделать срезанным под 45 градусов? Или надо делать блок.

Скошенный угол у блока
Здравствуйте! помогите сделать блок как на картинке. пробовал делать косой угол бордером, но тогда.

Блок на угол родительского блока
Как поставить div на угол родительского div в данном случае? <div <div.

Прозрачный угол для блока на CSS
Здравствуйте. Подскажите, как можно сделать такой угол на CSS, чтобы он был прозрачным? (Знаю, как.

Срезать угол у блока на неоднородном слое CSS
Всем привет. Необходимо срезать угол у блока, под которым находится неоднородный фон. Стандартный.

Обрезанный текст
Народ подскажите как это решается? баг обнаружен на Windows 7, Firefox

Или воспользуйтесь поиском по форуму:

Как сделать срезанный угол css?

5b4b88989eb58453750938.png

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

5b4b88e0b6aac583692503.png

Вот так просто я сделал через clip-path, но если добавляется тень/бордер — начинаются проблемы.

Решения из интернета основаны на фиксированных размерах блока, но уже если сайт на разных языках — меняется контент — меняются размеры. Такой вариант не подходит.

Может кто-то встречал правильный способ?

  • Вопрос задан более трёх лет назад
  • 3533 просмотра

1 комментарий

Средний 1 комментарий

Как обрезать угол в css

Форумчанин

Регистрация: 26.01.2012

Сообщений: 648

transform угол

Есть простой квадрат.Как мне при помощи transform обрезать верхний,левый угол?

Predator199
Посмотреть профиль
Найти ещё сообщения от Predator199

Участник клуба

Регистрация: 26.05.2010

Сообщений: 1,648

Обрезать? Это разве возможно? Свойство transform может масштабировать, и поворачивать на определенный градус, а вот насчет обрезать углы не уверен.

This world will never be What I expected (c)

Форумчанин

Регистрация: 26.01.2012

Сообщений: 648

Тогда как мне это сделать.С помощью чего? Я когда то обрезал углы с помощью стилей, а вот каким свойство забыл.

Predator199
Посмотреть профиль
Найти ещё сообщения от Predator199

Участник клуба

Регистрация: 26.05.2010

Сообщений: 1,648

Тогда вам нужно border-radius, но учтите, что версии ие7 и ие8 его не поддерживают.

This world will never be What I expected (c)

Форумчанин

Регистрация: 26.01.2012

Сообщений: 648

Он закругляет углы.

Predator199
Посмотреть профиль
Найти ещё сообщения от Predator199

Раздолбайских Дел

Регистрация: 22.05.2009

Сообщений: 3,828

 #d1 < -webkit-transform: matrix(1, -1, 0, 1, 0, 0); -moz-transform: matrix(1, -1, 0, 1, 0, 0); -ms-transform: matrix(1, -1, 0, 1, 0, 0); -o-transform: matrix(1, -1, 0, 1, 0, 0); height: 50em; left: 9em; overflow: hidden; position: absolute; top: 1em; visibility: hidden; width: 30em; >#d2 

Alar, верни репу!

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
std::transform вывести сумму двух векторов kouphais Общие вопросы C/C++ 2 16.10.2011 22:04
как изменить css свойство transform из Js? Даниил_глазко JavaScript, Ajax 2 15.10.2011 13:23
Угол поворота KoBRaAndrey Общие вопросы Delphi 7 29.08.2010 18:08
УГОЛ-фи DRAgon™ Паскаль, Turbo Pascal, PascalABC.NET 3 19.08.2010 13:33
Угол по тангенсу AVer Общие вопросы Delphi 9 01.02.2007 12:47

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *