Подскажите, как делаются подобного рода переходы в css? (внутри скриншот)

@VadimuSSS · Регистрация: 23.06.2014

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

Подскажите, как делаются подобного рода переходы в css? (внутри скриншот)

мне интересно, как делаются такие очертания менюшек или любого другого блока. на скриншотах указал стрелками на интересующий меня елемент.

@aj17 · 29.09.2014, 22:28

VadimuSSS, это border http://htmlbook.ru/css/border

@VadimuSSS · 30.09.2014, 01:22 **[ТС]**

это я понимаю, что border.....вопрос в том, как сделать не завершенность этих бордеров. они ведь не пересекаются, тоесть уголков нет.

@Lazy_Den · 30.09.2014, 02:11

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

CSS
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
.short_border {
    display: inline-block;
    position: relative;
    width: 100px;
    height: 100px;
    margin: 10px;
    z-index: 5;
}
.short_border::before {
    position: absolute;
    content: '';
    width: 100%;
    height: 80px;
    margin-top: 10px;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    z-index: 0;
}
.short_border::after {
    position: absolute;
    content: '';
    width: 80px;
    height: 100%;
    margin-left: 10px;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    z-index: 0;
}
.short_border > div { /* блок для контента */
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 1px;
    z-index: 10;
}

@VadimuSSS · 30.09.2014, 03:20 **[ТС]**

Lazy_Den, ну, вобщем-то да. внутри должен быть контент, а именно - маленькое лого, и кусочек текста. собственно, как в первом скриншоте.

@Lazy_Den · 30.09.2014, 03:23

Сообщение от VadimuSSS

внутри должен быть контент

Значит второй вариант должен подойти.

@VadimuSSS · 30.09.2014, 15:45 **[ТС]**

Lazy_Den, Обьясни пожалуйста, для чего тут псевдоэлементы before и after? Я пока что не могу этого понять

@Lazy_Den · 30.09.2014, 16:22

Сообщение от VadimuSSS

Обьясни пожалуйста, для чего тут псевдоэлементы

У основного элемента рамок нет, а задают рамки эти псевдоэлементы: первый имеет рамки слева и справа и высоту меньше родительского, а второй по аналогии, но с границами сверху и снизу.

@VadimuSSS · 30.09.2014, 16:59 **[ТС]**

Lazy_Den, ага, значит befor, after это дополнительные css свойства для одного и того же елемента? кстати, правила прописанные в short_border > div это для чего? по идее для дива уже описаны значения в прсто short_border ведь....
з.ы. извиняюсь за 100500 вопросов) хочу полностью разобраться, а одного htmlbook в данном вопросе мне не хватает

@Lazy_Den · 30.09.2014, 17:06

Элемент

Сообщение от VadimuSSS

short_border > div это для чего?

Элемент с классом "short_border" служит в качестве обёртки/контейнера, чтоб его дочерние элементы (псевдо и div) не выходили за границы. Внутренний div, про который вы спрашивали, это элемент, в котором будет контент: картинки, текст etc.

Добавлено через 1 минуту
P.S. Кстати, вы бы могли посмотреть, как всё устроено на том ресурсе, где вы видели такую "фишку". Может быть у них это реализовано по-другому и интересней.

@VadimuSSS · 30.09.2014, 17:30 **[ТС]**

Lazy_Den, ясненько, буду разбираться еще. Да посмотреть неоткуда. Я это в psd увидел.
хм...а я думал wrapper это обертка...

@Fedor92 · 30.09.2014, 18:21

Примерно так:

HTML5
1
2
3
4
5
6
7
<div>
    <a href="main.html">Главная</a>
    <div class="vline"></div>
    <a href="autor.html">Автор</a>
    <div class="vline"></div>
    <a class="contacts.html">Контакты</a>
</div>

CSS
1
.vline{width:1px; height: 10px; background:red; display:inline-block; margin: 0px 5px}

Потом можно стилизовать меню... Вместо backdround - color можно добавить backgound-image, только сначала надо прорисовать в фотошопе и задать нужную высоту... Можно во весь родительский блок, а можно свою чтобы вертикальные линии не упирались в границы родительского...

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG-файла с альфа-каналом с помощью библиотеки SDL3_image на Android 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом

Подскажите, как делаются подобного рода переходы в css? (внутри скриншот)

Решение

Решение

Решение

Решение

@VadimuSSS 2 / 2 / 0 Регистрация: 23.06.2014 Сообщений: 167

	Подскажите, как делаются подобного рода переходы в css? (внутри скриншот) 29.09.2014, 22:12. Показов 1299. Ответов 11 Метки нет (Все метки) мне интересно, как делаются такие очертания менюшек или любого другого блока. на скриншотах указал стрелками на интересующий меня елемент. 0

@aj17 333 / 309 / 168 Регистрация: 02.06.2014 Сообщений: 1,130
	29.09.2014, 22:28
	VadimuSSS, это border http://htmlbook.ru/css/border 0

@VadimuSSS 2 / 2 / 0 Регистрация: 23.06.2014 Сообщений: 167
	30.09.2014, 01:22 [ТС]
	это я понимаю, что border.....вопрос в том, как сделать не завершенность этих бордеров. они ведь не пересекаются, тоесть уголков нет. 0

@VadimuSSS 2 / 2 / 0 Регистрация: 23.06.2014 Сообщений: 167
	30.09.2014, 03:20 [ТС]
	Lazy_Den, ну, вобщем-то да. внутри должен быть контент, а именно - маленькое лого, и кусочек текста. собственно, как в первом скриншоте. 0

@VadimuSSS 2 / 2 / 0 Регистрация: 23.06.2014 Сообщений: 167
	30.09.2014, 15:45 [ТС]
	Lazy_Den, Обьясни пожалуйста, для чего тут псевдоэлементы before и after? Я пока что не могу этого понять 0

@VadimuSSS 2 / 2 / 0 Регистрация: 23.06.2014 Сообщений: 167
	30.09.2014, 16:59 [ТС]
	Lazy_Den, ага, значит befor, after это дополнительные css свойства для одного и того же елемента? кстати, правила прописанные в short_border > div это для чего? по идее для дива уже описаны значения в прсто short_border ведь.... з.ы. извиняюсь за 100500 вопросов) хочу полностью разобраться, а одного htmlbook в данном вопросе мне не хватает 0

@VadimuSSS 2 / 2 / 0 Регистрация: 23.06.2014 Сообщений: 167
	30.09.2014, 17:30 [ТС]
	Lazy_Den, ясненько, буду разбираться еще. Да посмотреть неоткуда. Я это в psd увидел. хм...а я думал wrapper это обертка... 0