Выпуклый блок

Тема в разделе "Верстка", создана пользователем MadChild, 29 май 2014.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. MadChild

    MadChild Постоялец

    Регистр.:
    23 янв 2013
    Сообщения:
    72
    Симпатии:
    5
    Всем привет. Подскажите плиз, как нибудь можно сверстать такой блок с помощью CSS3
    Как сделать с помощью картинки знаю, но может на css3 есть какое нибудь решение?!)
    Спасибо
     

    Вложения:

    • duga.jpg
      duga.jpg
      Размер файла:
      10,1 КБ
      Просмотров:
      52
  2. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.140
    Симпатии:
    671
  3. ITeshnik

    ITeshnik Постоялец

    Регистр.:
    21 май 2007
    Сообщения:
    105
    Симпатии:
    5
    только для кроссбраузерности вместо
    border-radius:100% 100% 0 0;

    нужно
    -webkit-border-top-left-radius: 100%;
    -webkit-border-top-right-radius: 100%;
    -moz-border-radius-topleft: 100%;
    -moz-border-radius-topright: 100%;
    border-top-left-radius: 100%;
    border-top-right-radius: 100%;
     
  4. Daul

    Daul Постоялец

    Регистр.:
    22 ноя 2008
    Сообщения:
    50
    Симпатии:
    32
    Если ширина фиксированная
    Код:
    <html>
    <style type='text/css'>
    #duga {
    border:2px #910 solid;
    background-color:#FFF;
    height:200px;
    width:600px;
    
    border-top-left-radius: 500px 90px;
    border-top-right-radius: 500px 90px;
    
    }
    </style>
    <body>
    <div id="duga"></div>
    </body>
    </html>
    
    Как на картинке не получится, но дугу изобразить можно. :)
     
  5. MadChild

    MadChild Постоялец

    Регистр.:
    23 янв 2013
    Сообщения:
    72
    Симпатии:
    5
    Все хорошо, но вот как сделать что бы блок :before был ЗА основным. z-index не срабатывает((
     
  6. spro1

    spro1

    Регистр.:
    26 май 2013
    Сообщения:
    170
    Симпатии:
    71
    что-то вопрос совсем непонятен. В коде есть всего один блок и для него используется псевдоэлемент. Может сможете нарисовать, как это должно выглядеть?
     
  7. ITeshnik

    ITeshnik Постоялец

    Регистр.:
    21 май 2007
    Сообщения:
    105
    Симпатии:
    5
    Как вариант вот http://codepen.io/anon/pen/BKeIs