Ved hjelp av “boksen skygger” og clip-banen sammen

0
6

La oss gjøre et lite steg-for-trinn i en situasjon hvor du ikke kan helt gjøre det som synes å være fornuftig, men du kan fortsatt få det gjort med CSS lureri. I dette tilfellet, vil det være å bruke en skygge til en form.

Du gjør en boks

.tag {
bakgrunn: #FB8C00;
color: #222;
skrift: fet 32px system-ui;
polstring: 2rem 3rem 2rem 4rem;
}

Du mote det inn i en fin tag form

Du kan bruke klipp-banen fordi den er fin for det.

.tag {
/* … */
klipp-bane: polygon(30px 0%, 100% 0%, 100% 100%, 30px 100%, 0% og 50%)
}

Ønsker du en skygge på det, så du…

Prøv å bruke box-shadow.

.tag {
/* … */
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

Men det fungerer ikke. Ingenting dukker opp. Du tror du er gal. Du antar du har det syntaks feil. Er du ikke. Problemet er at klipp-banen er å kutte det av.

Du kan drop-shadow et overordnet element i stedet

Det er et filter som gjør skygger også: drop-shadow(). Men du kan ikke bruke den direkte på elementet fordi klipp-banen vil kutte det ut som godt. Så du gjør en forelder:

<span class=”tag-wrap”>
<span class=”id”>
Merke
</span>
</span>

Du kan ikke bruke box-shadow på at foreldre heller, fordi foreldrene er fortsatt et rektangel og skygge vil se feil ut. Men du kan bruke et filter, og skyggen vil følge formen.

Se Penn
Skygge på Formen av Chris Coyier (@chriscoyier)
på CodePen.

Det er alt.