Эти удивительные формы

@Eyelashes · Регистрация: 07.08.2014

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

Однажды набрел на статейку, которую в последствие потерял, в которой рассказывалось, как сделать объект (div, например) произвольной формы. Причем это был не просто div с фоновым изображением а полноценный блок. Может кто знает эту тему или подскажет статью?
P.S. Помню, указывалось, что любой блок состоит из четырех частей, которыми и манипулируют.

illya05 · 25.08.2014, 14:48

http://jsfiddle.net/GcWGh/3/

HTML5
1
2
3
4
5
6
<div id="main">
    <div class="red"><div class="content">Red</div></div>
    <div class="green"><div class="content">Green</div></div>
    <div class="blue"><div class="content">Blue</div></div>
    <div class="black"><div class="content">Black</div></div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#main {position:relative;}
.black, .red, .blue, .green {
    position:absolute;
    border:3px dotted #000;
    background:#FFF;
    z-index:10;
}
.content {position:relative;margin:10px;}
.black {top:300px;left:103px;z-index:9;}
.black .content {height:180px;width:280px;background:#000;}
.blue{ top:50px;left:200px;border-bottom:none;}
.blue .content {height:30px;width:30px;background:#009;}
.red{top:0px;left:0px;}
.red .content {height:280px;width:80px;background:#F00;}
.green{top:100px;left:103px;border-left:none;border-bottom:none;}
.green .content{height:180px;width:180px;background:#070;}

Комментарий администратора

Правила форума пункт 5.19
Запрещено размещать ссылки на коды программ, расположенные на других сайтах. Коды программ должны размещаться на форуме.
Ссылка на песочницу - это бонус.

Новые блоги и статьи Все статьи Все блоги /
Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "АккумуляторыИШины", разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого. . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .
Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .	Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .	Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .

@Eyelashes 6 / 6 / 1 Регистрация: 07.08.2014 Сообщений: 50

	Эти удивительные формы 25.08.2014, 14:24. Показов 1172. Ответов 1 Метки нет (Все метки) Однажды набрел на статейку, которую в последствие потерял, в которой рассказывалось, как сделать объект (div, например) произвольной формы. Причем это был не просто div с фоновым изображением а полноценный блок. Может кто знает эту тему или подскажет статью? P.S. Помню, указывалось, что любой блок состоит из четырех частей, которыми и манипулируют. 0

Эти удивительные формы

Решение