Sześciobok w CSS

pytanie zadane 12 czerwca 2017 w HTML i CSS przez Bakr Mądrala (6,850 p.)
zamknięte 12 czerwca 2017 przez Bakr

Witam,

W jaki sposób zmniejszyć sześcian (https://codepen.io/Bakr1/pen/jwrMEz) do szerokości np. 30px, tak, aby całość się nie "rozjeżdżała"?

komentarz zamknięcia: Rozwiązane

1 odpowiedź

odpowiedź 12 czerwca 2017 przez mitelak Pasjonat (23,330 p.)

transform: scale(.6); w klasie menu-btn

komentarz 12 czerwca 2017 przez Bakr Mądrala (6,850 p.)

Chciałbym właśnie uniknąć stosowania tego rozwiązania. A po zastosowaniu 'sztywnych' wartości całość się rozjeżdża

komentarz 12 czerwca 2017 przez mitelak Pasjonat (23,330 p.)

https://codepen.io/mitelak/pen/GEqjEm w takim wypadku musisz sobie poobliczać. W .menu-btn masz wysokość i szerokość środkowego prostokąta. :after i :before to trójkąty górny i dolny, gdzie border-bottom to wysokość trójkąta, a border-left i right to podstawa dzielona na dwa. Mając takie dane możesz podostosowywać sobie to proporcjonalnie.