Параллелепипед с помощью css

[afagorn]

Есть ли способ создать с помощью css параллелепипед как на картинке?

 

[Great Rash]

 

http://codepen.io/anon/pen/JYvMxy

[psywalker]

Рашид, а почему? Ведь за уши можно подтянуть?

[afagorn]

Вроде параллелепипед и есть объемный прямоугольник. Но это не важно. Мне просто нужно узнать как сделать такую же кнопку как и на картинке только с помощью css

[Great Rash]

Хм, я почему-то рассматривал эту фигуру как плоскую...

[Launder]

Возможно жутко криво, но как-то мне сходу это представляется так:

 

http://jsfiddle.net/Launder/ocuzpd7w/

 

Интересно, а как провести ещё одну линию от верхнего левого угла, до его дальнего коллеги? чтоб реально было на параллелепипед похоже...

Edited October 28, 2015 by Launder

[Launder]

Вот чтоб совсем параллелепипед, можно как-то так попробовать:

 

http://jsfiddle.net/Launder/gx2ff9ww/

 

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

Точнее начальная точка, похоже берётся по самому центру, но не факт что это самый удобный вариант.

К тому же, не ясно откуда берётся дефолтная ширина пункта меню. То есть ставишь left: 0; или ставишь right: 0 и видишь что эти две точки удалены друг от друга на определённое расстояние. Откуда оно берётся? не вполне ясно.

 

Возможно, имеет смысл поменять структуру html c

<ul>    <li class="object">Каталог</li>    <li class="botline"></li>    <li class="topline"></li>    <li class="crossline"></li></ul>

на

<ul>    <li class="object"><span>Каталог</span>                      <ul>                         <li class="botline"></li>                         <li class="topline"></li>                         <li class="crossline"></li>                      </ul></ul>

и прописывать стили уже для неё.

http://codepen.io/anon/pen/JYvMxy

  box-shadow:    -1px -1px 0 blue,    -2px -2px 0 blue,    -3px -3px 0 blue,    -4px -4px 0 blue;

Обалдеть! Какое простое и красивое решение!

Edited October 28, 2015 by Launder

[Launder]

http://codepen.io/anon/pen/JYvMxy

 

То же решение, с прикрученным псевдоэлементом для параллелепидирования кнопки

 

http://jsfiddle.net/Launder/0md9ms2h/1/

Edited October 28, 2015 by Launder

[mrnobody]

Добавлю для коллекции )

http://codepen.io/corvus-007/pen/rOvrOr?editors=010

[VeniVidiVici]

Вот ещё один вариант, с 1 сайта:

http://jsfiddle.net/1k95kpLj/

 

Правда границы нельзя указать на стыке углов(или можно?).

Но зато кода меньше

[Launder]

Вот ещё один вариант, с 1 сайта:

http://jsfiddle.net/1k95kpLj/

 

Правда границы нельзя указать на стыке углов(или можно?).

Но зато кода меньше

 

Это по сути тот вариант, который был указан в самом начале. Границы указать можно и выше есть тому пример.

[Launder]

Добавлю для коллекции )

http://codepen.io/corvus-007/pen/rOvrOr?editors=010

           display: inline-block;           outline: none;

А Вы не подскажите, зачем в Вашем решении эти две строчки?

 

Это какая-то особенность SCSS? Также, как я пониманию, box-sizing: border-box проставлено, скорее как элемент стилистики кода? То есть, особой роли этой свойство не играет?

Edited October 30, 2015 by Launder

[wwt]

Это какая-то особенность SCSS? Также, как я пониманию, box-sizing: border-box проставлено, скорее как элемент стилистики кода? То есть, особой роли этой свойство не играет?

 

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

[mrnobody]

 

Добавлю для коллекции )

http://codepen.io/corvus-007/pen/rOvrOr?editors=010

           display: inline-block;           outline: none;

А Вы не подскажите, зачем в Вашем решении эти две строчки?

 

Это какая-то особенность SCSS? Также, как я пониманию, box-sizing: border-box проставлено, скорее как элемент стилистики кода? То есть, особой роли этой свойство не играет?

 

display: inline-block; если будет строчный элемент, например элемент <a href="">…</a>

outline: none; - убираем обводку;

box-sizing: border-box; - чтобы рамки и паддинги входили в размер элемента (Например, установите ширину рамки вместо 1px на 10px для :after, и закоментите  box-sizing: border-box;). Хотя например для псевдоэлемента :after можно было бы использовать left: 0; right: 0; и удалить width: 100%; и box-sizing: border-box;

[Launder]

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

 

Просто я предположил, что эти строчки были добавлены в связи с какой-то особенностью SCSS.

 

http://jsfiddle.net/Launder/dLge2vqy/1/

 

Перевёл решение на CSS с минимальными изменениями и стало не вполне ясно зачем эти две строчки в коде.

 

Добавлю для коллекции )

http://codepen.io/corvus-007/pen/rOvrOr?editors=010

 

display: inline-block; если будет строчный элемент, например элемент <a href="">…</a>

 

В смысле, если вместо <button> будет <a>? Иными словами Вы сделали именно класс .button чтоб сделать что-то вроде универсальный заготовки, где вместо тега <button>, можно использоваться, например, <a>, отсюда некоторая избыточность свойств?

 

outline: none; - убираем обводку;

 

Просто в случае использования тега <button> мы, вроде, убираем её свойством border: none;

 

Хотя например для псевдоэлемента :after можно было бы использовать left: 0; right: 0; и удалить width: 100%; и box-sizing: border-box;

 

Ну да, вижу как работает, спасибо.

[afagorn]

Добавлю для коллекции )

http://codepen.io/corvus-007/pen/rOvrOr?editors=010

Самое лучшее решение оказалось этим. Спасибо большое за помощь

[Mozzie]

Просто я предположил, что эти строчки были добавлены в связи с какой-то особенностью SCSS. http://jsfiddle.net/...der/dLge2vqy/1/

Там есть кнопка "View Compiled" http://codepen.io/corvus-007/pen/rOvrOr?editors=010никакой особенности нет, это тот же css.