Languages
[Edit]
PL

Jak zaokr─ůgla─ç rogi w elemencie div przy u┼╝yciu CSS

0 points
Created by:
Fletcher-Peralta
418

Czy wiedzia┼ée┼Ť, ┼╝e mo┼╝esz przypisa─ç r├│┼╝ne promienie krzywizny do ka┼╝dej z kraw─Ödzi w elemencie div HTML?

Dzisiaj chcia┼ébym pokaza─ç, jak ┼éatwo zaokr─ůgla─ç rogi w elementach HTML za pomoc─ů┬áCSS. 😊

Efekt końcowy:

CSS - przyk┼éad div z zaokr─ůglonymi rogami
CSS - przyk┼éad div z zaokr─ůglonymi rogami

Istnieje kilka sposob├│w, aby zaokr─ůgli─ç element w zale┼╝no┼Ťci od tego, kt├│re rogi chcesz zaokr─ůgli─ç.

Zaokr─ůglanie ka┼╝dego rogu z t─ů sam─ů warto┼Ťci─ů

W tym rozwi─ůzaniu u┼╝ywamy┬áw┼éa┼Ťciwo┼Ťci┬áborder-radius z jedn─ů warto┼Ťci─ů, aby zaokr─ůgli─ç ka┼╝dy r├│g elementu div o podan─ů warto┼Ť─ç.

Uruchamialny przykład:

// ONLINE-RUNNER:browser;

<!DOCTYPE >
<html>
  <head>
    <style>
      div {
        height: 100px;
        width: 120px;
        background-color: #b5edc2;
        border-radius: 25px; /* <------ u┼╝yj tego aby zaokr─ůgli─ç wszystkie rogi o wybran─ů warto┼Ť─ç */
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Zaokr─ůglanie przeciwleg┼éych

W tym rozwi─ůzaniu wykorzystujemy┬áw┼éa┼Ťciwo┼Ť─ç┬áborder-radius z dwiema warto┼Ťciami, aby zaokr─ůgli─ç przeciwleg┼ée rogi elementu div z dwoma r├│┼╝nymi warto┼Ťciami.

Uruchamialny przykład:

// ONLINE-RUNNER:browser;

<!DOCTYPE >
<html>
  <head>
    <style>
      div {
        height: 100px;
        width: 120px;
        background-color: #b5edc2;
        border-radius: 25px 45px; /* <---------- u┼╝yj tego aby zaokr─ůgli─ç przeciwleg┼ée rogi */
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Zaokr─ůglij ka┼╝dy r├│g inn─ů warto┼Ťci─ů

W tym rozwi─ůzaniu u┼╝ywamy┬áw┼éa┼Ťciwo┼Ťci┬áborder-radius z czterema warto┼Ťciami, aby zaokr─ůgli─ç ka┼╝dy r├│g elementu div o inn─ů warto┼Ť─ç, zgodnie z ruchem wskaz├│wek zegara.

CSS - zaokr─ůglone rogi z 4 warto┼Ťciami w┼éa┼Ťciwo┼Ťci border-radius (zgodnie z ruchem wskaz├│wek zegara)
CSS - zaokr─ůglenie z 4 warto┼Ťciami w┼éa┼Ťciwo┼Ťci border-radius (zgodnie z ruchem wskaz├│wek zegara)

Uruchamialny przykład:

// ONLINE-RUNNER:browser;

<!DOCTYPE >
<html>
  <head>
    <style>
      div {
        height: 100px;
        width: 120px;
        background-color: #b5edc2;
        border-radius: 10px 30px 20px 40px; /* <----- u┼╝yj tego aby zaokr─ůgli─ç ka┼╝dy z rog├│w o podan─ů warto┼Ť─ç */
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Niestandardowe zaokr─ůglone rogi

W tym rozwi─ůzaniu wykorzystujemy┬áw┼éa┼Ťciwo┼Ť─ç┬áborder-radius z trzema warto┼Ťciami do zaokr─ůglenia rog├│w elementu div w nast─Öpuj─ůcy spos├│b:

  • pierwsza warto┼Ť─ç opisuje lewy g├│rny r├│g -┬ápromie┼ä 20px,
  • druga warto┼Ť─ç opisuje przeciwleg┼ée prawy g├│rny i lewy dolny r├│g -┬ápromie┼ä┬á45px,
  • trzecia warto┼Ť─ç opisuje prawy dolny r├│g - promie┼ä┬á30px.

Uruchamialny przykład:

// ONLINE-RUNNER:browser;

<!DOCTYPE >
<html>
  <head>
    <style>
      div {
        height: 100px;
        width: 120px;
        background-color: #b5edc2;
        border-radius: 20px 45px 30px; /* <---------- u┼╝yj tego aby zaokr─ůgli─ç rogi */
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Mo┼╝esz r├│wnie┼╝ okre┼Ťli─ç r─Öcznie, kt├│ry z naro┼╝nik├│w┬áchcesz zaokr─ůgli─ç o┬ápodan─ů warto┼Ť─ç┬áw nast─Öpuj─ůcy spos├│b:┬á

// ONLINE-RUNNER:browser;

<!DOCTYPE >
<html>
  <head>
    <style>
      div {
        height: 100px;
        width: 120px;
        background-color: #b5edc2;
        border-top-left-radius: 25px;     /* <----- lewe g├│rne zaokr─ůglenie     */
        border-top-right-radius: 30px;    /* <----- prawe g├│rne zaokr─ůglenie    */
        border-bottom-right-radius: 40px; /* <----- prawe dolne zaokr─ůglenie    */
        border-bottom-left-radius: 50px;  /* <----- lewe dolne zaokr─ůglenie     */
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Przyk┼éad okr─ůg┼éego elementu div

Mo┼╝emy r├│wnie┼╝ u┼╝y─ç┬áw┼éa┼Ťciwo┼Ťci┬áborder-radius z warto┼Ťciami procentowymi. W tym rozwi─ůzaniu ustawi┼éem warto┼Ť─ç w┼éa┼Ťciwo┼Ťci na, 50%┬áaby utworzy─ç element div w kszta┼écie ko┼éa.

Uruchamialny przykład:

// ONLINE-RUNNER:browser;

<!DOCTYPE >
<html>
  <head>
    <style>
      div {
        height: 100px;
        width: 100px;
        background-color: #b5edc2;
        border-radius: 50%; /* <------ u┼╝yj tego aby uzyska─ç okr─ůg┼éy div (UWAGA: height=width) */
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

Dzi─Öki┬áza po┼Ťwi─Öcony czas┬ái do zobaczenia w kolejnych postach! 😊🔜

Powi─ůzane posty

Referencje

CSS - Artykuły

Native Advertising
­čÜÇ
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

ÔŁĄ´ŞĆ­čĺ╗ ­čÖé

Join