Łatwiejszy sposób na utworzenie div div niż użycie obrazu?


183

Zastanawiam się, czy jest łatwiejszy sposób tworzenia okrągłych div niż niż to, co robię teraz.

Obecnie tworzę tylko obraz dla każdego rozmiaru, ale irytuje to.

Czy w ogóle używa CSS do tworzenia div, które są okrągłe i mogę określić promień?


1
W jakich przeglądarkach musi to być obsługiwane?
thirtydot


1
Możesz także użyć SVG (VML), aby utworzyć okrąg.
jasssonpet 30.01.11

2
Dlaczego nie możesz zmienić szerokości i wysokości obrazu zamiast tworzyć różne rozmiary? Jak duże są te obrazy?
Mottie 30.01.11

Odpowiedzi:


295

Oto demo: http://jsfiddle.net/thirtydot/JJytE/1170/

CSS:

.circleBase {
    border-radius: 50%;
    behavior: url(PIE.htc); /* remove if you don't care about IE8 */
}

.type1 {
    width: 100px;
    height: 100px;
    background: yellow;
    border: 3px solid red;
}
.type2 {
    width: 50px;
    height: 50px;
    background: #ccc;
    border: 3px solid #000;
}
.type3 {
    width: 500px;
    height: 500px;
    background: aqua;
    border: 30px solid blue;
}

HTML:

<div class="circleBase type1"></div>

<div class="circleBase type2"></div><div class="circleBase type2"></div>

<div class="circleBase type3"></div>

Aby ta funkcja działała w IE8 i starszych wersjach , musisz pobrać i używać CSS3 PIE . Moje powyższe demo nie będzie działać w IE8, ale to tylko dlatego, że jsFiddle nie hostuje PIE.htc.

Moje demo wygląda następująco:


Nie mogę utworzyć div okrągłej w chrome. Działa to jednak w Mozilli .. Mój adres URL to chokate.maninactionscript.com/chokates kliknij obraz pustyni lub poprzedni div pokazany przy powiększaniu obrazu nie jest okrągły .. który jest w mozilli.
techie_28

1
@ techie_28: Na divtwojej stronie jest okrągły, który możesz zobaczyć, jeśli dodasz na przykład border: 5px solid reddo niego. Problem polega na tym, że części obrazu, które „wystają z okręgu” nie są ukryte. Żadne ze zwykłych obejść nie jest tutaj szczególnie łatwe do zastosowania. Sugeruję użycie tej -webkit-mask-imagewłaściwości do naprawy przeglądarek WebKit (i zachowaj border-radius, dla innych przeglądarek). Więcej informacji tutaj: webkit.org/blog/181/css-masks . Możesz również zadać pytanie tutaj na temat przepełnienia stosu, aby sprawdzić, czy ktoś jeszcze ma jakieś inne pomysły.
thirtydot

1
Możesz także zrobić 100% zamiast 999 pikseli.
Tony Wickham

1
.htc nie jest już obsługiwany.
Oliver Dixon,

Zastanawiam się, jak wyrównać obiekty (takie jak przyciski) w okrągłym div! : D
Zibri

26

Ustawienie promienia granicznego każdej strony elementu na 50% spowoduje utworzenie widoku okręgu w dowolnym rozmiarze:

.circle {
  border-radius: 50%;
  width: 200px;
  height: 200px; 
  /* width and height can be anything, as long as they're equal */
}

1
Jest to prawdopodobnie metoda, którą należy zastosować teraz (w 2017 r.).
Scribblemacher

13

Spróbuj tego

.iphonebadge {
  border-radius:99px;
 -moz-border-radius:99px;
 -webkit-border-radius:99px;
  background:red;
  color:#fff;
  border:3px #fff solid;
  background-color: #e7676d;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#e7676d), to(#b7070a)); /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #e7676d, #b7070a); /* Chrome 10+, Saf5.1+, iOS 5+ */
  background-image: -moz-linear-gradient(top, #e7676d, #b7070a); /* FF3.6 */
  background-image: -ms-linear-gradient(top, #e7676d, #b7070a); /* IE10 */
  background-image: -o-linear-gradient(top, #e7676d, #b7070a); /* Opera 11.10+ */
  background-image: linear-gradient(top, #e7676d, #b7070a);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#e7676d', EndColorStr='#b7070a'); 
 -webkit-box-shadow: 0px 2px 4px #000000; /* Saf3-4 */
 -moz-box-shadow: 0px 2px 4px #000000; /* FF3.5 - 3.6 */
  box-shadow: 0px 2px 4px #000000; /* Opera 10.5, IE9, FF4+, Chrome 10+ */
  display:inline-block;
  padding:2px 2px 2px 2px ;
  margin:3px;
  font-family:arial;
  font-weight:bold;
   }

6

To jest faktycznie możliwe.

Zobacz: Wskazówka CSS: Jak tworzyć koła bez obrazów . Zobacz demo .

Ale uwaga, ma poważne wady pod względem kompatybilności, w zasadzie robisz szczekanie kota.

Zobacz, jak działa tutaj

Jak zobaczysz, wystarczy skonfigurować heighti widthdo połowyborder-radius

Powodzenia!


Cześć, dzięki za jsfiddlelink! Ten link jest obecnie jedynym działającym na podstawie Twojej odpowiedzi. ;)
TooroSan

3

Jest też [zły pomysł] używania kilku (20+) poziomych lub pionowych div 1px do zbudowania koła. Ta wtyczka jQuery używa tej metody do konstruowania różnych kształtów.


3

Podaj szerokość i wysokość w zależności od rozmiaru, ale zachowaj oba wartości na tym samym poziomie

.circle {
  background-color: gray;
  height: 400px;
  width: 400px;
  border-radius: 100%;
}
<div class="circle">
</div>


3
border-radius: 50%;wystarczy.
MattAllegro

3

.fa-circle{
  color: tomato;
}

div{
  font-size: 100px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div><i class="fa fa-circle" aria-hidden="true"></i></div>

Chciałem tylko wspomnieć o innym rozwiązaniu, które odpowiada na pytanie „Łatwiejszy sposób tworzenia div div niż używanie obrazu?” który ma używać FontAwesome.

Możesz zaimportować plik css fontawesome lub z CDN tutaj

a następnie po prostu:

<div><i class="fa fa-circle" aria-hidden="true"></i></div>

i możesz nadać mu dowolny kolor, dowolny rozmiar czcionki.


2

Możesz wypróbować funkcję radial-gradientCSS:

.circle {
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: #ffffff; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, #ffffff 17%, #ff0a0a 19%, #ff2828 40%, #000000 41%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, #ffffff 17%,#ff0a0a 19%,#ff2828 40%,#000000 41%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, #ffffff 17%,#ff0a0a 19%,#ff2828 40%,#000000 41%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

Zastosuj to do divwarstwy:

<div class="circle"></div>

2

Powiedzmy, że masz ten obraz:

aby zrobić z tego krąg, wystarczy dodać

.circle {
  border-radius: 50%;
  width: 100px;
  height: 100px; 
}

Więc jeśli masz div, możesz zrobić to samo.

Sprawdź poniższy przykład:

.circle {
  border-radius: 50%;
  width: 100px;
  height: 100px; 
  animation: stackoverflow-example infinite 20s linear;
  pointer-events: none;
}

@keyframes stackoverflow-example {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
<div>
  <img class="circle" src="https://www.sitepoint.com/wp-content/themes/sitepoint/assets/images/icon.javascript.png">
</div>


1

Można użyć promień, ale to nie będzie działać na IE: border-radius: 5px 5px;.


1

.circle {
	height: 20rem;
	width: 20rem;
	border-radius: 50%;
	background-color: #EF6A6A;
}
<div class="circle"></div>


0

w zasadzie używa absolutnej pozycji div do umieszczenia znaku na podanych współrzędnych. więc używając równania parametrycznego dla koła, możesz narysować okrąg. jeśli zmienisz pozycję div na względną, spowoduje to sinusoidę ...

w istocie grafujemy równania poprzez nadużywanie właściwości position. Nie znam się dobrze na css, więc ktoś może z pewnością uczynić to bardziej eleganckim. cieszyć się.

działa to na wszystkich przeglądarkach i urządzeniach mobilnych (o których wiem). Używam go na mojej stronie internetowej do rysowania fal sinusoidalnych tekstu (www.cpixel.com). oryginalne źródło tego kodu znajduje się tutaj: www.mathopenref.com/coordcirclealgorithm.html

    <html>
    <head></head>
    <body>
    <script language="Javascript">

    var x_center = 50; //0 in both x_center and y_center will place the center
    var y_center = 50; // at the top left of the browser
    var resolution_step = 360; //how many times to stop along the circle to plot your character.
    var radius = 50; //how big ya want your circle?
    var plot_character = "·"; //could use any character here, try letters/words for cool effects
    var div_top_offset=10;
    var div_left_offset=10;
    var x,y;

    for ( var angle_theta = 0;  angle_theta < 2 * Math.PI;  angle_theta += 2 * Math.PI/resolution_step ){
        x = x_center + radius * Math.cos(angle_theta);
        y = y_center - radius * Math.sin(angle_theta);
        document.write("<div style='position:absolute;top:" + (y+div_top_offset) + ";left:"+ (x+div_left_offset) + "'>" + plot_character + "</div>");
    }

    </script>
    </body>
    </html>

to jest to, czego chcę, ale czy jest to możliwe, aby wyświetlić listę kręgów w panelu z zachowaniem odpowiedniej odległości między okręgami, jak pokazano tutaj plnkr.co/edit/KgWsnwDbgwiacGeJ7O7i?p=preview
Jinna Balu


-1

W przypadku okręgu utwórz element div, a następnie wprowadź szerokość = 2 razy promień granicy = 2 razy wypełnienie. Również wysokość linii = 0 Na przykład, przy 50px jako promienie okręgu, poniższy kod działa dobrze:

width: 100px;
padding: 50px 0;
border: solid;
line-height: 0px;
border-radius: 50px;
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.