如何用 css 制作那个形状？

Question

您好，我需要以某种方式整合以下日期选择器的日期标记。用css可以吗？或者你有什么建议

Answer 1

我认为您无法使用 css。我认为您必须使用 javascript.

重构日期选择器

Answer 2

你可以使用 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/>

如何用 css 制作那个形状？

How to make that shape with css?

css

css-shapes