HTML5 ve CSS3 kullanarak nasıl daire çizersiniz?
İçeri metin koymak da mümkün mü?
Yanıtlar:
Tek başına bir daire çizemezsiniz. Ama bir daire ile aynı şeyi yapabilirsiniz.
Yapmak istediğiniz dairenin genişliğinin / yüksekliğinin yarısı kadar yuvarlatılmış köşeleri (aracılığıyla border-radius) olan bir dikdörtgen oluşturmanız gerekir.
#circle {
width: 50px;
height: 50px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
background: red;
}<div id="circle"></div>border-radius: 50%;iyi çalıştığını buldum , boyutu istediğiniz gibi değiştirin. Renk için background-colorveya kullanabilirsiniz border.
HTML 5'te oldukça mümkündür . Seçenekleriniz şunlardır: Gömülü SVG ve <canvas>etiket .
Gömülü SVG'de daire çizmek için:
<svg xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="50" fill="red" />
</svg>Daire içinde <canvas>:
var canvas = document.getElementById("circlecanvas");
var context = canvas.getContext("2d");
context.arc(50, 50, 50, 0, Math.PI * 2, false);
context.fillStyle = "red";
context.fill()<canvas id="circlecanvas" width="100" height="100"></canvas>Kullanabileceğiniz birkaç unicode daire vardır:
Burada daha fazla şekil .
Aşağıdakileri yapmak isterseniz çevrelerin üzerine metin yerleştirebilirsiniz:
Ayrıca (gibi özel bir yazı tipi kullanabilirsiniz bu değil tüm bilgisayarların / tarayıcılar aynı yazı yüklü beri farklı sistemlerde aynı seyir bunun bir şansı daha yüksek olmasını istiyorsanız bir tane).
2015 itibariyle, bunu yapabilir ve metni 15 satırlık CSS ( Fiddle ) ile ortalayabilirsiniz :
body {
background-color: #fff;
}
#circle {
position: relative;
background-color: #09f;
margin: 20px auto;
width: 400px;
height: 400px;
border-radius: 200px;
}
#text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>circle with text</title>
</head>
<body>
<div id="circle">
<div id="text">Text in the circle</div>
</div>
</body>
</html>Herhangi bir -webkit-URL olmadan , bu IE11, Firefox, Chrome ve Opera'da çalışır ve HTML5 (deneysel) ve CSS3 için geçerlidir.
MS Edge'de (2020) aynı.
.circle{
height: 65px;
width: 65px;
border-radius: 50%;
border:1px solid red;
line-height: 65px;
text-align: center;
}<div class="circle"><span>text</span></div>Öğenin border-radius değerine eşdeğer bir border-radius vermek için border-radius niteliğini kullanabilirsiniz. Örneğin:
<div style="border-radius 10px; -moz-border-radius 10px; -webkit-border-radius 10px; width: 20px; height: 20px; background: red; border: solid black 1px;"> </div>(-Moz ve -webkit uzantılarını kullanmanın nedeni, Gecko ve Webkit'in CSS3 öncesi son sürümlerini desteklemektir.)
Bu sayfada daha fazla örnek var . Metin ekleme konusunda bunu yapabilirsiniz, ancak çoğu tarayıcının kutu dolgu modeli hala dış kareyi kullandığı için konumlandırmaya dikkat etmeniz gerekir.
HTML ile daire çizmenin teknik olarak bir yolu yoktur ( <circle>HTML etiketi yoktur), ancak bir daire çizilebilir.
Bir tane çizmenin en iyi yolu border-radius: 50%gibi bir etikete eklemektir div. İşte bir örnek:
<div style="width: 50px; height: 50px; border-radius: 50%;">You can put text in here.....</div>border-radius: 50%;boyutu ne olursa olsun tüm öğeleri bir daireye dönüştürür. En azından, sürece height ve width hedefin aksi takdirde oval dönüşecek aynıdır .
#target{
width: 100px;
height: 100px;
background-color: #aaa;
border-radius: 50%;
}<div id="target"></div>Not : tarayıcı önek olan değil border-radius için artık gerekli
Alternatif olarak, clip-path: circle();bir öğeyi bir daireye dönüştürmek için de kullanabilirsiniz. Öğe widthbüyüktür height(veya tam tersi) olsa bile, yine de bir oval değil , bir daire haline gelecektir .
#target{
width: 200px;
height: 100px;
background-color: #aaa;
clip-path: circle();
}<div id="target"></div>Not : klip-yoldur değil (henüz) tüm tarayıcılar tarafından desteklenen
Metni sadece hedefin etiketlerinin içine yazarak dairenin içine yerleştirebilirsiniz,
örneğin:
<div>text</div>Eğer isterseniz merkez daire içinde metin, aşağıdakileri yapabilirsiniz:
#target{
width: 100px;
height: 100px;
background-color: #aaa;
border-radius: 50%;
display: flex;
align-items: center;
}
#text{
width: 100%;
text-align: center;
}<div id="target">
<div id="text">text</div>
</div>Komut dosyası etiketlerinde aşağıdakileri yapmanız yeterlidir:
<!Doctype html>
<html>
<head>
<title>Circle Canvas</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid
#d3d3d3;">
<body>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();
</script>
</body>
</body>
</html>Ve işte, çevreniz var.
h1 {
border: dashed 2px blue;
width: 200px;
height: 200px;
border-radius: 100px;
text-align: center;
line-height: 60px;
}<h1> <br>hello world</h1>.at-counter-box {
border: 2px solid #1ac6ff;
width: 150px;
height: 150px;
border-radius: 100px;
font-family: 'Oswald Sans', sans-serif;
color:#000;
}
.at-counter-box-content {
position: relative;
}
.at-counter-content span {
font-size: 40px;
font-weight: bold ;
text-align: center;
position: relative;
top: 55px;
} <head>
<style>
#circle{
width:200px;
height:200px;
border-radius:100px;
background-color:red;
}
</style>
</head>
<body>
<div id="circle"></div>
</body>basit ve acemi :)
<div class="at-counter-box-content">
<div class="at-counter-content">
<span>40%</span>
</div><!--at-counter-content-->
</div><!--at-counter-box-content-->CSS'nizi yazmak için sass kullanıyorsanız şunları yapabilirsiniz:
@mixin draw_circle($radius){
width: $radius*2;
height: $radius*2;
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
.my-circle {
@include draw_circle(25px);
background-color: red;
}Hangi çıktılar:
.my-circle {
width: 50px;
height: 50px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
background-color: red;
}Burada deneyin: https://www.sassmeister.com/