Бриллиант на CSS3: как создать треугольник для граней?

Question

[Никита]

Пытаюсь создать бриллиант на CSS и задался вопросом: как создать треугольники для граней? Простой способ через border не поможет, тк треугольники не ровные, вершина смещена.

Answer 1

[Graph]

Все есть в гугле.

https://css-tricks.com/examples/ShapesOfCSS/

cssdeck.com/labs/css-diamond

Comments

[Никита]

работает, но я не понимаю как задать градиенты для бордеров

Answer 2

[Сергей Мельников]

ruseller.com/lessons.php?id=1538
там есть svg, вот это и попробуйте.

а вообще, тут можно обычными бордерами

Answer 3

[Сергей Протько]

через бордеры, просто бордеры будут разных размеров. Пример:
jsfiddle.net/443s8/1
а там где вершина смещена (есть тупой угл) можно просто сделать в два слоя блоки.

Comments

[Никита]

@Fesor вы мне много раз подсказывали хорошие идеи, может подскажите как вообще построить процесс обучения? по "наставничаете"?)

Answer 4

[Александр Петров]

Способ через border + transform: rotate(*deg) ?