PL
HTML - jak zrobić okrągły element div
0 points
W tym artykule chcielibyśmy pokazać wam, jak stworzyć okrąg element div w HTML.
Szybkie rozwiązanie:
xxxxxxxxxx1
border-radius: 50%;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:
xxxxxxxxxx1
<html>2
<head>3
<style>4
.circle1 {5
background: red;6
border-radius: 50%; /* <-------- wymagane */7
width: 50px;8
height: 50px;9
display: inline-block;10
}11
</style>12
</head>13
<body>14
<div class="circle1"></div>15
</body>16
</html>17
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:
xxxxxxxxxx1
<html>2
<head>3
<style>4
.circle2 {5
background: yellow;6
border-radius: 50%; /* <-------- wymagane */7
border: solid;8
border-color: red;9
width: 60px;10
height: 60px;11
display: inline-block;12
}13
14
.circle3 {15
background: lightgreen;16
border-radius: 50%; /* <-------- wymagane */17
border: double;18
border-color: blue;19
border-width: 8px;20
width: 70px;21
height: 70px;22
display: inline-block;23
}24
</style>25
</head>26
<body>27
<div class="circle2"></div>28
<div class="circle3"></div>29
</body>30
</html>31
