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 Super_Saimon
      Добрый день! Я столкнулся с такой ситуацией: создается в компании статическая страница для хранения служебных документов. Иконки там, по-факту, не нужны, но начальник как во всем известном видео: "Хочу иконки!". Для нее поднимается локальный сервер без выхода в инет. На сайте есть ссылка прямая на хранилище с данными иконками, но она при такой настройке сервера, не работоспособна. Я качнул с сайта архив с данными иконками. Прописал как в инструкции путь в проекте. И тут я в непонимании: в инструкции для локального подключения подключается файл с расширением .css, через  тег <link>, при этом все иконки, которые я использовал при подключении прямой ссылки на хранилище через <script>, пропали. Вместо них квадратики. Я пробовал  точно также через <script> указать локальный адрес на файл с расширением .js. Но в результате иконки просто пропали. В чем может быть проблема?
    • By purple/ocean
      Как правильно сверстать картинки(руку, лист салата и тд) на данном шаблоне?

      Интересуют именно первые 3 изображения, а именно тарелка, рука с дошиком и лист салата.
      Тарелку можно просто сверстать допустим на флексах разбив блок на 3 столбца. Но вот интересно как сверстать две оставшиеся картинки так еще и с текстом.
      Я подумал, что можно также сверстать на тех же флексах разбив на те же 3(в случае с рукой) и 2(в случае с листом салата) колонки флекс сетку, но в таком случае изображения толкали бы друг друга так как рука с тарелкой и лист салата имеют общую площадь расположения на странице. Как это сделать? Помогите пожалуйста, может какое-то свойство прилипания или вообще другой метод верстки?
    • By alexanderPoiu
      Подскажите пожалуйста. Коньент с картинкой и абзацем скрываются под футером.

  • Member Statistics

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

    No registered users viewing this page.

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

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

    • нашла ответ 'use strict'; class StringBuilder { constructor(value) { this.value = value; } get val() { return this.value; } set val(value) { this.value = value; } append(str) { this.value += str; } prepend(str) { this.value = `${str} ${this.value}`; } // додає елемент на поч і в кін pad(str) { // this.value = str + this.value + str; this.value = ` ${str} ${this.value} ${str}`; } } const builder = new StringBuilder('.'); // const value = builder.value(); // console.log(value); builder.append('^'); console.log(builder.value); // '.^' builder.prepend('^'); console.log(builder.value); // '^.^' builder.pad('='); console.log(builder.value); // '=^.^='  
    • Не могу понять где у меня ошыбка. нужно написать класс и зделать следуещое:  Геттер value - возвращает текущее значение поля _value Метод append(str) - получает парметр str (строку) и добавляет ее в конец _value Метод prepend(str) - получает парметр str (строку) и добавляет ее в начало value Метод pad(str) - получает парметр str (строку) и добавляет ее в начало и в конец _value 'use strict'; class StringBuilder { constructor(value) { this._value = value; } get itev() { return this._value; } append(str) { this._value.push(str); } prepend(str) { this._value.unshift(str); } // додає елемент на поч і в кін pad(str) { this._value.split(' '); } } const builder = new StringBuilder('.'); // const value = builder.value(); // console.log(this.value); builder.append('^'); console.log(builder.value); // '.^' builder.prepend('^'); console.log(builder.value); // '^.^' builder.pad('='); console.log(builder.value); // '=^.^='
    • Я думаю тем, что на параграфы делятся статьи, главы книг и т.п., в общем всё что предназначено для чтения. Зачем же менять назначение параграфа включая его в форму, если есть div, который служит для тех ситуаций, когда текстовому блоку не нужна семантическая окраска.
  • Popular Contributors