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:
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>