'How to make that shape with css? [closed]

enter image description here

Hello I need to somehow integrate the day mark of the below datepicker. Can it be done with css? or do you have any suggestions

csscss-shapes


Solution 1:[1]

you can do something like this using css + inline 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/>

Solution 2:[2]

I think you can't do with css. I think you have to refactor a datepicker using javascript.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 longflex

Related Questions