DomenForum.net

DomenForum.net (https://domenforum.net/index.php)
-   Программирование (https://domenforum.net/forumdisplay.php?f=26)
-   -   Форма div через css (https://domenforum.net/showthread.php?t=201295)

Port_Artur 13.03.2016 10:41

Форма div через css
 
Вложений: 1
Нужно сделать 3 div вот такой формы, чтобы они идеально прижимались краями и получалось такое (общая ширина 960, низ по 320, верх: 300 360 300, высота 150). Помогите пожалуйста.

Port_Artur 13.03.2016 10:56

Вложений: 1
Ширина бордюра между ними должна быть 1 пиксель когда они друг к другу прижмутся, т.е. у среднего DIV не должно быть рамки справа и слева.

lname 13.03.2016 15:42

Проще всего сделать фоном
Сложнее - у второго дива два потомка с rotate + border

А вообще нужно видеть макет и знать фиксированные ли габариты у блоков

Port_Artur 13.03.2016 16:48

Нужно именно на 3-х DIV.
Всё фиксированное:
Цитата:

(общая ширина 960, низ по 320 , верх (слева направо): 300 360 300, высота 150)

Port_Artur 15.03.2016 00:57

Есть на форуме профи в CSS?

lname 15.03.2016 01:05

покажите макет - это можно и нельзя сделать разными способами

Port_Artur 15.03.2016 07:50

Это обычная шапка сайта из 3-х необычных DIV. И показывать-то нечего собственно. Как расписать CSS?

Цитата:

<div class="levyy"></div>
<div class="centr"></div>
<div class="pravyy"></div>

.levyy
{

}

.centr
{

}

.pravyy
{

}

Crimea 15.03.2016 12:41

Можно начать с этого -
http://stackoverflow.com/questions/1...angled-borders

Port_Artur 16.03.2016 00:06

Там короче эту трапецию белую между рисунками сделали из 2-х треугольников но дивы- так и остались прямоугольными, а я думал что можно сделать их неправильной формы и чтобы они краями соприкасались.
Неосуществимо получается.

добавлено через 1 час 8 минут
Вот ещё интересная статья - http://frontender.info/css-shapes/

domensearch 17.03.2016 20:06

Port_Artur, если я все правильно понял, то как-то так.
https://jsbin.com/qebinacipi/1/edit?css,output
Для того чтобы был border 1px, нужно уменьшить средний блок на 2px, либо левый и правый на 1px. После чего отредактировать позиционирование.


Текущее время: 18:38. Часовой пояс GMT +4.

Powered by vBulletin® Version 3.8.4
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Техническая поддержка — DevArt.PRO. Перевод: zCarot.