Как сделать это поле со стрелкой отзывчивым?
Вот мой код на данный момент:
<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;
}
}
вы можете взглянуть на этот рабочий пример
Он работает, как и ожидалось, на рабочем столе, но не реагирует, может ли кто-нибудь помочь мне сделать его отзывчивым?
@ObsidianAge Я поставил процентные значения ширины границы стрелки в медиа-запросе, но это не сработало.
Я бы рекомендовал использовать встроенное изображение SVG для стрелки вместо того, чтобы пытаться построить его с помощью CSS.
@Flying Я пробовал это с фоновым изображением, но потому что мне нужно поместить в него какой-то абзац и список элементов, а фоновое изображение не реагирует правильно, поэтому мне приходится обрабатывать его с помощью css.
@vinnlee На самом деле можно применить фоновое изображение не для всего элемента, а только для ::after
, который представляет собой стрелку под элементом. Это сделает ваш основной элемент независимым от изображения, но позволит вам создать необходимую стрелку.
Вы можете использовать единицу 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, вы также должны установить ширину "контейнера" с помощью модулей vw
и соответствующим образом обновить параметры arrow-box
. Смотрите обновление в моем ответе.
Вы используете жестко заданные пиксельные значения для ширины. Просто замените их процентными значениями.