JSFiddle - React, Tailwind, and code Playground

Вырез в блоке

by Ankhena

HTML

<ul>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste modi in, aut, illo error voluptates quae cumque amet deserunt, quasi nam esse, omnis veritatis. Iusto, at magnam provident. Deleniti, vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste modi in, aut, illo error voluptates quae cumque amet deserunt, quasi nam esse, omnis veritatis. Iusto, at magnam provident. Deleniti, vero!</li>
  <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste modi in, aut, illo error voluptates quae cumque amet deserunt, quasi nam esse, omnis veritatis. Iusto, at magnam provident. Deleniti, vero!</li>
</ul>

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap');

:root {
  --color: #e8eae7;
  --bg-color: #959ec9;
  --r: 50px;
  --size: calc(2*var(--r) - 20px);
}

* {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Poppins', arial, sans-serif;
  background: #28264b;
}

ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 20px;
  padding: 20px;
  margin: 0;
  list-style-type: none;
  counter-reset: list;
}

li {
  position: relative;
  padding: calc(var(--r) + 20px) 20px;
  margin-top: 50px;
  border-radius: 20px;
  font-size: 20px;
  font-weight: 200;
  background: radial-gradient(15px at top center, transparent calc(var(--r) - 1px), var(--bg-color) var(--r));
  color: var(--color);
  //filter: drop-shadow(0 0 2px #fff);
}

li::before {
  content: counter(list);
  counter-increment: list;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--size);
  height: var(--size);
  font-size: 2em;
  border-radius: 50%;
  background: var(--bg-color);
  color: var(--color);
}