Блог

Главная - Вопросы по программированию - Как сделать кнопку возврата под углом к iphone с помощью CSS или SVG с помощью мобильного веб-сайта semantic html (iPhone, Android)?

Как сделать кнопку возврата под углом к iphone с помощью CSS или SVG с помощью мобильного веб-сайта semantic html (iPhone, Android)?

#android #html #mobile #css #svg

#Android #HTML #Мобильный #css #svg

Вопрос:

Как сделать кнопку возврата для iPhone в CSS3?

Используя только <a href="#">Back</a> , кнопка должна выглядеть одинаково в iphone safari и браузере Android.

введите описание изображения здесь

В данном ответе кнопка действительно сделана без изображения. Но HTML-код не является семантическим 

 <a href="#">
      <div class="body">
        <div>
          <span></span>
        </div>
        <p>Back</p><p>
      </p></div>
      </a>

Есть ли другой лучший семантический способ сделать эту кнопку с менее сложным кодом?

как с этим кодом

 <a href="#">
 <span>Back</span>
</a>

Я рассматриваю только браузер с поддержкой CSS3.

Редактировать: 29 сентября 2011

Возможно ли создать подобную кнопку с помощью SVG?

Комментарии:

1. Да, это возможно сделать в SVG.

Ответ №1:

Я обнаружил эту реализацию, которая имеет гораздо лучшую семантику и в основном работает только с CSS для достижения наилучшего результата: здесь

Ответ №2:

Сделано некоторое время назад Джеффом Баттертоном, вот так:http://lab.jeffbatterton.com/iphone-back-button / 🙂

Комментарии:

1. По этой ссылке он использует столько html для создания кнопки <div class="body"> <div> <span></span> </div> <p>Back</p><p> </p></div>

2. Это хорошая идея, и она почти работает, но вы можете видеть соединение между двумя разделениями (которые поворачивают div и остальную часть кнопки).