Как сделать эту форму с помощью css?

Здравствуйте, мне нужно каким-то образом интегрировать отметку дня нижеуказанного средства выбора даты. Можно ли это сделать с помощью css? или у вас есть предложения

Используйте SVG, намного проще

— 20.03.2022 13:17

css css-shapes

20.03.2022 13:02

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Я думаю, что вы не можете сделать с css. Я думаю, вам нужно реорганизовать средство выбора даты, используя javascript.

20.03.2022 14:08

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

вы можете сделать что-то подобное, используя css + встроенный svg:

.container{
  width: 420px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-around;
}
.day{
  width: 33.33%;
  padding: 30px 0;
  font-size: 48px;
  font-weight: bold;
  position: relative;
  text-align: center;

}

.day.active{
  color: white;
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%20112%20112%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Crect%20width%3D%22112%22%20height%3D%22112%22%20ry%3D%2222.487616%22%20fill%3D%22%23c2c7cf%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M21.70009%200C8.75088.89667%201.02185%2010.043165%200%2020.405879V91.59215C1.160088%20102.17478%209.220977%20111.21852%2021.70009%20112l56.36821-.33137c9.38109-.2579%2015.19012-4.06833%2018.86948-12.82354l11.54876-29.49999c1.59348-4.10288%203.51225-6.713551%203.51346-13.345101-.001-6.63155-1.91998-9.24222-3.51346-13.3451l-11.54876-29.5C93.25842%204.39969%2087.44939.58927%2078.0683.33137Z%22%20fill%3D%22%231c2a4b%22%2F%3E%0A%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-size: auto;
  background-position: center;
}

<div class = "container" >
<div class = "day">21</div>
<div class = "day">22</div>
<div class = "day">23</div>
<div class = "day active">24</div>
<div class = "day">25</div>
<div class = "day">26</div>
<div/>

Спасибо, это хорошо, но я использую пакет (github.com/wix/react-native-календари), и он не разрешает фоновое изображение из-за реакции на нативные (для этого требуется компонент). Поэтому мне нужно завершить без фонового изображения

— 20.03.2022 16:54

20.03.2022 14:16