freeodmin2

как сверстать элемент с углами и дать ему деть?

Recommended Posts

Друзья, всем привет. Я учусь верстать, и вот не могу разобраться сейчас, как сверстать такой элемент

на десктопе 4 блока в ряд. на мобиле 4 блока в столбик.

как бы проблемы с вёрсткой блока нет, как и с медиа запросом, чтобы на мобильнике их сделать в ряд.

но как сверстать этот угол? да еще так, чтобы у всего этого блока была тень. вот как сверстать такую фигуру с закруглением всех углов на 10 пикселей и добавлением тени?

помогите плиз кодом

всем заранее спасибо за участие

вот картинка для наглядности

how_css.png

Edited by freeodmin2

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Amaere
      Ищу ментора по веб-разработке. Готов работать бесплатно или платить за обучение. Главное, что бы я мог потом зарабатывать.
       
    • By pitchcontrol
      Доброго дня всем.
      Есть пример https://codepen.io/pitchcontrol/pen/bGbJdgZ Две таблицы вложены в блок, у блока задан размер шрифта x-large, у одной таблицы задан large а у другой smaller.
      Получается у них должны быть одинаковые размеры, но по факту они разные. Почему это так?
    • By sarcus
      Основной блок содержит 2 блока
      1-й с некоторым текстом
      2-й flex блок с input элементами
      2-й блок как будто не видит <b>ширины</b> основного блока, которую <b>задает 1-й блок</b> (sometext)  
      и расширяет основной. 
      Подскажите как решить данную проблему ? 
      Пример :  https://jsfiddle.net/sarcus/1vmaf3wo/14/
       
      Но если вместо input (class='inp') вставить div то все приходит в норму:
      https://jsfiddle.net/1vmaf3wo/83/
      <style> .cont {              position: absolute;             top : 200px; left: 30px;             border: 1px solid #ccc;         }         .ctrl {               display: flex;              width: 100%;             flex-direction: row;             border: 1px solid#ccc;          }         .btn {              flex: 0 0 auto;                      }         .inp {             flex: 1 1 auto;             width: 100%;         } </style> <div class="cont">             <div class="sometext">555 5555 5555 5555 5556</div>             <div class="ctrl">                     <input type="button" class="btn"  value="<<" />                     <input class="inp" type="text" />                     <input type="button" class="btn" value=">>" />             </div>                      </div>  
  • Member Statistics

    46,498
    Total Members
    3,128
    Most Online
    Alx_2019
    Newest Member
    Alx_2019
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Спрашивают сейчас

  • Пишут сейчас

    • Дорогие пользователи!   У Нас появились новые прокси сервера России в городе Санкт-Петербург.   Всегда в наличии качественные прокси стран: Россия, Украина, Казахстан, США, Канада, Латвия, Молдова, Германия, Франция, Италия и других стран Европы. Ассортимент городов.   Наш сайт: https://proxywhite.com/   По всем вопросам Вы можете обратиться к консультанту на сайте или в поддержку.   Так же Вы можете подписаться на наши соц.сети что бы не попускать новости нашего сервиса и скидки.   ВКонтакте: https://vk.com/proxywhite_com Твиттер: https://twitter.com/proxywhite_com Телеграмм канал: https://t.me/proxywhite Ютуб канал: https://www.youtube.com/channel/UCoXlwm6R4XDvpS5MhCOVTTA?view_as=subscriber
    • Добрый день! Есть задача - добавить ссылку в html код страницы, позволяющий пользователю сохранить её на комп. Имя сохраняемого файла должно быть Title.htm
      По сути, ссылка - аналог нажатия Ctrl+S. Второй день копаю - видать не там... Прошу помощи С уважением...
    • В верстке, в подавляющем большинстве случаев, нет единственно правильных решений. С одной стороны, для того что-бы не раздувать код, нужно делать якорь на тот тег на который отправляет ссылка. Но, с другой стороны, а если завтра этот тег поменяется, например, с параграфа на заголовок? Тогда выходит правильнее сделать пустой якорный тег 🙂
  • Popular Contributors