I got the following code from this article, and started to simplify it. But there is one thing included that I don't understand and I didn't find any resource about it:
What does div[class][id] mean and how can it be replaced in this example?
Why does it not work to write #sticker:after, .circle:after instead of div[class][id]:after?
.circle:after,
.circle:before {
content: '';
height: calc(var(--s)/2);
width: calc(var(--s)/2)
}
#sticker {
--s: 400px;
--p: 10px;
font-family: verdana;
font-size: 16px;
line-height: 1.25em;
text-align: justify;
width: var(--s);
height: var(--s);
border-radius: 50%;
background: #333;
color: #fff;
display: inline-block;
vertical-align: middle;
margin: 5px
}
.circle:before {
float: left;
clear: left;
shape-outside: radial-gradient(farthest-side at bottom right, transparent calc(100% - var(--p)), red 0)
}
div[class][id]:before {
shape-outside: radial-gradient(farthest-side at top right, transparent calc(100% - var(--p)), red 0)
}
.circle:after {
float: right;
clear: right;
shape-outside: radial-gradient(farthest-side at bottom left, transparent calc(100% - var(--p)), red 0)
}
div[class][id]:after {
shape-outside: radial-gradient(farthest-side at top left, transparent calc(100% - var(--p)), red 0)
}<div id="sticker" style="--s:20em;--p:15px">
<div class="circle"></div>
<div class="circle" id="idAttribute"></div>
Lorem ipsum dolor sit amet, eget orci, tinci dunt place rat in sociis. Pel lentes que ultri cies. Lorem ipsum dolor sit amet, eget orci, tinci dunt place rat in sociis. Pel lentes que ultri cies. Lorem ipsum dolor sit amet, eget orci, tinci dunt place rat in sociis. Pel lentes que ultri cies. Lorem ipsum dolor sit amet, eget orci, tinci dunt place rat in sociis.
</div>