Как создать изображение зубов с помощью html + css ⇐ CSS

[Anonymous]

Здравствуйте, я пытаюсь создать изображение зубов, как на зубной карте. Зубы на стоматологической карте. Я написал ниже css, но конечный результат меня не удовлетворил.

тело{ поле: 100 пикселей; } .контейнер { ширина: 100 пикселей; высота: 100 пикселей; граница: сплошная, 1 пиксель, черная; положение: относительное; } .вершина { граница: сплошная, 1 пиксель, черная; ширина: 68%; высота: 20%; фон: белый; преобразование: перспектива (3 пикселя) RotateX (-5 градусов); позиция: абсолютная; верх: 4%; осталось: 15%; } .левый { граница: сплошная, 1 пиксель, черная; ширина: 22,5%; высота: 63%; фон: белый; преобразование: перспектива (3,5 пикселя) RotateY (6 градусов); позиция: абсолютная; верхние: 17,5%; осталось: 6%; } .верно { граница: сплошная, 1 пиксель, черная; ширина: 20%; высота: 72%; фон: белый; преобразование: перспектива (5,5 пикселей) RotateY (-8 градусов); позиция: абсолютная; верхние: 13%; справа: 3%; } .центр { граница: сплошная, 1 пиксель, черная; ширина: 53,5%; высота: 54%; позиция: абсолютная; фон: белый; верхние: 22%; осталось: 23%; } .нижний { граница: сплошная, 1 пиксель, черная; ширина: 68%; высота: 20%; фон: белый; преобразование: перспектива (3 пикселя) RotateX (5 градусов); позиция: абсолютная; низ: 4%; осталось: 15%; } .желтый{ цвет фона: желтый; } Возможно, у вас есть лучшее решение, которое будет выглядеть лучше. Я хочу, чтобы можно было перехватывать событие в каждом из полей с помощью Ajax/Jquery

Я ищу лучшее решение. Мне придется разместить много таких «зубов» рядом друг с другом, и было бы неплохо, если бы все это соответствовало разному разрешению экрана.