Languages
[Edit]
PL

HTML - jak zrobi─ç okr─ůg┼éy element div

0 points
Created by:
Dirask Community
5460

W tym artykule chcieliby┼Ťmy pokaza─ç wam, jak stworzy─ç okr─ůg element div w HTML.

Szybkie rozwi─ůzanie:

border-radius: 50%;

Koło - przykład

Aby stworzy─ç ko┼éo, musimy stworzy─ç styl z┬áw┼éa┼Ťciwo┼Ťci─ů┬áborder-radius ustawion─ů na 50%┬ái do┼é─ůczy─ç go do naszego elementu┬á<div>.

Uruchamialny przykład:

// ONLINE-RUNNER:browser;

<html>
  <head>
    <style>
      .circle1 {
        background: red;
        border-radius: 50%; /* <-------- wymagane */
        width: 50px;
        height: 50px;
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <div class="circle1"></div>
  </body>
</html>

Okr─ůg┼ée elementy z obramowaniem

W poni┼╝szym przyk┼éadzie ponownie u┼╝ywamy┬áw┼éa┼Ťciwo┼Ťci┬áborder-radius ustawionej┬ána┬á50%, aby nasze elementy by┼éy okr─ůg┼ée. Nast─Öpnie za pomoc─ů┬ár├│┼╝nych┬áw┼éa┼Ťciwo┼Ťci┬áborder, stylujemy nasze ko┼éa.

Uruchamialny przykład:

// ONLINE-RUNNER:browser;

<html>
  <head>
    <style>
      .circle2 {
        background: yellow;
        border-radius: 50%; /* <-------- wymagane */
        border: solid;
        border-color: red;
        width: 60px;
        height: 60px;
        display: inline-block;
      }

      .circle3 {
        background: lightgreen;
        border-radius: 50%; /* <-------- wymagane */
        border: double;
        border-color: blue;
        border-width: 8px;
        width: 70px;
        height: 70px;
        display: inline-block;
      }
    </style>
  </head>
  <body>
    <div class="circle2"></div>
    <div class="circle3"></div>
  </body>
</html>

Powi─ůzane posty

HTML (PL)

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