HTML sayfasında daire nasıl çizilir?

HTML5 ve CSS3 kullanarak nasıl daire çizersiniz?

İçeri metin koymak da mümkün mü?

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>

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:

* { font-size: 50px; }

○
◌
◍
◎
●

Burada daha fazla şekil .

Aşağıdakileri yapmak isterseniz çevrelerin üzerine metin yerleştirebilirsiniz:

#container {
    position: relative;
}
#circle {
  font-size: 50px;
  color: #58f;
}
#text {
    z-index: 1;
    position: absolute;
    top: 21px;
    left: 11px;
}

<div id="container">
    <div id="circle">&#x25CF;</div>
    <div id="text">a</div>
</div>

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).

border-radius:50% dairenin, kabın aldığı boyutlara göre ayarlanmasını istiyorsanız (örneğin, metin değişken uzunlukluysa)

-moz-Ve -webkit-öneklerini unutmayın !

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ı.

Öğ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;">&nbsp;</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>

Border-radius özelliğini kullanabilir veya sabit yükseklik ve genişlikte bir div ve png daireli bir arka plan oluşturabilirsiniz.

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.

1. h1 {
   border: dashed 2px blue;
     width: 200px;
     height: 200px;
     border-radius: 100px;
     text-align: center;
     line-height: 60px;
     
   }

   <h1> <br>hello world</h1>

   Kod parçacığını çalıştırınSonuçları gizle

   Snippet'i genişlet

.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/