Tworzenie idealnie symetrycznego koła przy użyciu promienia krawędzi bez określania wysokości lub szerokości

Wygląda na to, że ustawienie na 50% lub 100% nie wystarczyło, aby nadać znacznikowi span rozciągnięty wygląd. Czy jest możliwe, aby ten okrąg był idealnie symetryczny bez ustawienia jego wysokości lub szerokości?Tworzenie idealnie symetrycznego koła przy użyciu promienia krawędzi bez określania wysokości lub szerokości

span { 
 
    background: #232323; 
 
    border-radius: 50%; 
 
    color: #fff; 
 
    display: inline-block; 
 
    font-family: Arial, sans-serif; 
 
    padding: 6px; 
 
}

<span>x</span>

Źródło

2015-05-27 Carl Edwards

Jak o pocisku 'treści: '\ x02022'; font-family: sans-serif; '(jeśli mam rację) i kontroluję' font-size'? –

Nie przypisuję sobie tego za zasługę, ale spójrz na to [skrzypce] (http://jsfiddle.net/k5doehae/). Znalazłem ten kod w Internecie kilka miesięcy temu i zapisałem sedno jego treści do przyszłych analiz (do których nigdy nie udało mi się: P). – Harry

Czy treść span jest zawsze jedna litera? Jeśli tak, to będzie działać dla dowolnego rozmiaru czcionki http://jsfiddle.net/pts4cemx/5/ – mirek

Rozwiązaniem jest po prostu ustawić width do komputerowej wysokości czcionki:

width: 1em;

span { 
 
    background: #232323; 
 
    border-radius: 50%; 
 
    color: #fff; 
 
    display: inline-block; 
 
    padding: 6px; 
 
    width: 1em; 
 
    text-align: center; 
 
}

<span>x</span>

Źródło

2015-05-27 17:12:11

To wciąż nie jest idealne koło. – BoltClock

Widzę, o czym mówi @BoltClock. Boki wydają się spłaszczone. –

Tak, to wymaga strojenia wypełnienia za pomocą jednostki rozmiaru czcionki. Muszę odejść teraz, usunę moją odpowiedź, jeśli nie da się jej łatwo naprawić. –

Coś takiego może być?

span { 
 
    background: #232323; 
 
    border-radius: 100%; 
 
    color: #fff; 
 
    display: inline-block; 
 
    font-family: arial; 
 
    font-size: 20px; 
 
    text-align: center; 
 
    width: 1.35em; 
 
    padding-bottom:.2em; 
 
} 
 

 
span.medium { 
 
    
 
    font-size: 50px; 
 
} 
 

 

 
span.ridikulus { 
 
    
 
    font-size: 500px; 
 
}

<span >x</span> 
 
<span class="medium">x</span> 
 
<span class="ridikulus">x</span>

Źródło

2015-05-27 17:27:52 DardanM

Co musisz określić matematycznie, aby to zadziałało? Widzę, że coś zostało zrobione z "szerokości" i "dopełnienia-dna", używając 'em' jako jednostki miary. –

Brak matematyki: p Po prostu zmywałem to przez kilka sekund, aby uzyskać wygląd koła, a następnie wypróbowałem różne rozmiary, aby przekonać się, czy pozostaje takie samo – DardanM

celu zapewnienia alternatywnego sposobu, zamiast opierania się na border-radius, że myślał o użyciu glif • oraz położenie, że na etykiecie zakresu.

Wielkość można dostosować za pomocą font-size. Dużą zaletą jest to, że nie trzeba generować idealnego koła.

span { 
 
    color: #fff; 
 
    position: relative; 
 
    line-height: 1; 
 
    display: inline-block; 
 
    padding: 10px; 
 
} 
 
span:before { 
 
    content:'\02022'; 
 
    color: #000; 
 
    font-family: sans-serif; 
 
    font-size: 10rem; 
 
    position: absolute; 
 
    z-index: -1; 
 
    line-height: 0; 
 
    left: -14px; 
 
    top: 20px; 
 
    text-shadow: 0 0 10px rgba(0,0,0,0.4); 
 
}

<span>x</span>

Źródło

2015-05-27 18:24:37

Tworzenie idealnie symetrycznego koła przy użyciu promienia krawędzi bez określania wysokości lub szerokości

Odpowiedz

Powiązane problemy