Не встают шрифты в ios?

А может в 21-м году трутайпы ставить не надо? )))
Сафари версий 5-ти летней давности новые форматы вполне понимают.

Как сверстать вот такие два 4-х угольника?

Не сложноват ли svg?
Двумя path всё делается. Нет? )))

Как выделить у родителя ребёнка, и использовать селектор ~, чтобы выделить другой элемент?

С помощью css - никак. Ибо оба input в Вашем случае являются дочерними к своим div, а button, так сказать, братом к этим div.
Комбинации А + B и A ~ B работают только для селекторов у которых общий непосредственный родитель.
Выход:
1. Вынесите input из div и поставьте их перед button, поставьте им display:none. На их место в div поставьте label с for на эти input. Ну, и там в label нарисуйте чего-нибудь.
2. Или используйте javascript, в частности нужное событие.