Levágott sarkú doboz CSS-el

Megmutatom hogyan tudsz ilyen levágott sarkú dobozt létrehozni néhány egyszerű CSS trükkel. Valójában nincs is levágva a sarok, ez egy színátmenet. Minden HTML elem téglalap alakú területet vesz fel, akkor is, ha más alakzatnak néz ki. Többféle megoldás létezik egy-egy elem alakjának megváltoztatására, ilyen például a lekerekítés és a 2D transzformáció is.

Olyan esetekben, amikor szögletes a terület színátmenettel is létre lehet hozni az alakzatot. Miért jobb megoldás, mint a háttérkép, vagy más trükkök? Ha kódban hozod létre ezeket az alakzatokat, egyszerűen hozzá lehet igazítani a weboldal többi részéhez és a mobil elrendezésekhez is.

A fenti kódban a 30px átírásával megváltoztathatod a levágás méretét anélkül, hogy ez hatással lenne az elem többi részére. Plusz 1 gradiens paraméter hozzáadásával tudsz csinálni átmenetes hátteret is. Még két paraméterrel a szemközti sarkot is le lehet vágni.

A színátmenethez használj generátort, sokkal könnyebb lesz kialakítani a megfelelő kinézetet.

https://cssgradient.io

<div class="right-corner">
    <div>
        <h2>Hogyan?</h2>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam aliquet ac lorem quis rhoncus. Morbi sem ex, commodo at odio in, aliquam accumsan diam. Donec vehicula massa non ipsum tempus vestibulum. Morbi porttitor orci augue, in varius augue rhoncus eu. Nunc elit tortor, sollicitudin id accumsan vitae, luctus in tellus. Donec lobortis sapien libero, sit amet viverra ipsum malesuada sed. Sed tincidunt, tortor eget vulputate ullamcorper, nisl arcu venenatis enim, vitae maximus ligula lacus nec neque.
    </div>
</div>

.right-corner {
    position: relative
}

.right-corner > div {
    padding: 2rem;
    background: rgba(255, 255, 255, 1);
    background: linear-gradient(225deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 30px, rgba(255, 255, 255, 1) 30px);

}

.right-corner:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 2px;
    left: 2px;
    z-index: -1;
    background: rgb(0, 0, 0);
    background: linear-gradient(225deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 30px, rgba(0, 0, 0, 1) 30px);
    filter: blur(4px);
    opacity: 0.15;
}