[Edit]

Jak zaokrąglać rogi w elemencie div przy użyciu CSS

1 contributors

2 contributions

0 discussions

0 points

Created by:

Fletcher-Peralta

778

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

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ą

Edit

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:

xxxxxxxxxx
 
<!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>

Auto running

Zaokrąglanie przeciwległych

Edit

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:

xxxxxxxxxx
 
<!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>

Auto running

Zaokrąglij każdy róg inną wartością

Edit

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:

xxxxxxxxxx
 
<!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>

Auto running

Niestandardowe zaokrąglone rogi

Edit

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:

xxxxxxxxxx
 
<!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>

Auto running

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:

xxxxxxxxxx
 
<!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>

Auto running

Przykład okrągłego elementu div

Edit

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:

xxxxxxxxxx
 
<!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>