Хотите сделать стрелку с рамкой отзывчивой

Как сделать это поле со стрелкой отзывчивым?

Вот мой код на данный момент:

<div class = "arrow-box"></div>

.arrow-box {
    border-bottom: 0;
    position: relative;
    background: #fff;
    border: 1px solid #13aac5;
    border-bottom: 0;
    width: 1000px;
    height: 240px;
    box-shadow: 1px 1px 21px 0px rgba(50, 50, 50, 0.3);
    &:before {
        position: absolute;
        bottom: -63px;
        display: inline-block;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 62px 501px 0 501px;
        border-color: #13aac5 transparent transparent transparent;
        content: '';
    }
    &:after {
        position: absolute;
        display: inline-block;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 62px 500px 0 500px;
        border-color: #fff transparent transparent transparent;
        content: '';
        bottom: -62px;
    }

}

вы можете взглянуть на этот рабочий пример

Он работает, как и ожидалось, на рабочем столе, но не реагирует, может ли кто-нибудь помочь мне сделать его отзывчивым?

Вы используете жестко заданные пиксельные значения для ширины. Просто замените их процентными значениями.

Obsidian Age 09.08.2018 05:45

@ObsidianAge Я поставил процентные значения ширины границы стрелки в медиа-запросе, но это не сработало.

vinnlee 09.08.2018 05:50

Я бы рекомендовал использовать встроенное изображение SVG для стрелки вместо того, чтобы пытаться построить его с помощью CSS.

Flying 09.08.2018 13:16

@Flying Я пробовал это с фоновым изображением, но потому что мне нужно поместить в него какой-то абзац и список элементов, а фоновое изображение не реагирует правильно, поэтому мне приходится обрабатывать его с помощью css.

vinnlee 10.08.2018 09:00

@vinnlee На самом деле можно применить фоновое изображение не для всего элемента, а только для ::after, который представляет собой стрелку под элементом. Это сделает ваш основной элемент независимым от изображения, но позволит вам создать необходимую стрелку.

Flying 10.08.2018 12:42
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
5
158
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете использовать единицу vw, которая представляет собой процент от ширины области просмотра. Читать далее.

.arrow-box {
  border-bottom: 0;
  position: relative;
  background: #fff;
  border: 1px solid #13aac5;
  border-bottom: 0;
  width: 96vw;
  height: 240px;
  margin:auto;
  box-shadow: 1px 1px 21px 0px rgba(50, 50, 50, 0.3);
}

.arrow-box:before {
  position: absolute;
  bottom: -63px;
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 62px 48vw 0;
  border-color: #13aac5 transparent transparent transparent;
  content: '';
}

.arrow-box:after {
  position: absolute;
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 62px 48vw 0;
  border-color: #fff transparent transparent transparent;
  content: '';
  bottom: -62px;
}
<div class = "arrow-box"></div>

Обновлять Использование модулей vw с контейнером (см. Комментарии в CSS):

.container {
  width: 80vw; /* say we want to have it 80% of our viewport */
}

.arrow-box {
  border-bottom: 0;
  position: relative;
  background: #fff;
  border: 1px solid #13aac5;
  border-bottom: 0;
  width: 76vw; /* it should be little less than .container because of shadow
                * or you may set it more precizely with calc(80vw - 42px)  */
  height: 240px;
  margin: auto;
  box-shadow: 1px 1px 21px 0px rgba(50, 50, 50, 0.3);
}

.arrow-box:before {
  position: absolute;
  bottom: -63px;
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 62px 38vw 0; /* 50% of .arrow-box width */
  border-color: #13aac5 transparent transparent transparent;
  content: '';
}

.arrow-box:after {
  position: absolute;
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 62px 38vw 0;
  border-color: #fff transparent transparent transparent;
  content: '';
  bottom: -62px;
}
<div class = "container">
  <div class = "arrow-box"></div>
</div>

Пожалуйста, ответьте мне еще на небольшой вопрос :). Если я помещу его в контейнер шириной 1000 пикселей, как мне рассчитать для него vw?

vinnlee 09.08.2018 08:18

@vinnlee, вы также должны установить ширину "контейнера" ​​с помощью модулей vw и соответствующим образом обновить параметры arrow-box. Смотрите обновление в моем ответе.

Kosh 09.08.2018 18:04

Другие вопросы по теме