2021.11.26.

Levágott sarkú doboz CSS-el

lekerekites-trukkok-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;
}


Tetszett a bejegyzés?

Iratkozz fel és küldök Neked E-mail értesítőt, ha ehhez hasonló új cikk kerül fel a blogra.

.
Nekem való?

Maradtak még kérdéseid?

Ha nem vagy biztos benne, hogy ez Neked való, vagy további kérdéseid vannak a kurzusokkal kapcsolatban,
írd meg chaten és 48 órán belül válaszolok!

Kérdezek!

Kövesd közösségi csatornáinkat is!

Beavatlak a frontend fejlesztői munka rejtelmeibe, mesélek a szabadúszáról, mutatok hasznos kódrészeleteket és engem is jobban megismerhetsz.