JSFiddle - React, Tailwind, and code Playground

Тени и вырезанные уголки

by Ankhena

HTML

<div class="block">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam facilis, tempora minus et molestiae quaerat nisi est voluptate quidem rerum voluptatum mollitia consequuntur tempore dolores expedita incidunt temporibus corrupti laborum, sequi officiis. Enim, odit quam excepturi commodi quisquam aliquid sequi similique, autem, incidunt, porro quibusdam laboriosam non hic officiis repudiandae!
  
</div>
<p>Для https://qna.habr.com/q/969419</p>

CSS

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


* {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

body {
  padding: 40px;
  margin: 0;
  font-family: 'Neucha', cursive;
}

.block {
  max-width: 300px;
  padding: 20px;
  margin: 20px auto;
  background:
    radial-gradient(15px at top left, transparent 14px, #fff 15px),
    radial-gradient(15px at top right, transparent 14px, #fff 15px),
    radial-gradient(15px at bottom right, transparent 14px, #fff 15px),
    radial-gradient(15px at bottom left, transparent 14px, #fff 15px);
  background-position: top left, top right, bottom right, bottom left;

  background-size: 50% 50%;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 20px gray);
}