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ń?
html
css
geometry
css-shapes
bmaster
źródło
źródło
Odpowiedzi:
Oto demo: http://jsfiddle.net/thirtydot/JJytE/1170/
CSS:
HTML:
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:
źródło
div
twojej stronie jest okrągły, który możesz zobaczyć, jeśli dodasz na przykładborder: 5px solid red
do 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-image
właściwości do naprawy przeglądarek WebKit (i zachowajborder-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.Ustawienie promienia granicznego każdej strony elementu na 50% spowoduje utworzenie widoku okręgu w dowolnym rozmiarze:
źródło
Spróbuj tego
źródło
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ć
height
iwidth
do połowyborder-radius
Powodzenia!
źródło
jsfiddle
link! Ten link jest obecnie jedynym działającym na podstawie Twojej odpowiedzi. ;)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.
źródło
Podaj szerokość i wysokość w zależności od rozmiaru, ale zachowaj oba wartości na tym samym poziomie
źródło
border-radius: 50%;
wystarczy.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:
i możesz nadać mu dowolny kolor, dowolny rozmiar czcionki.
źródło
Możesz wypróbować funkcję
radial-gradient
CSS:Zastosuj to do
div
warstwy:źródło
Powiedzmy, że masz ten obraz:
aby zrobić z tego krąg, wystarczy dodać
Więc jeśli masz div, możesz zrobić to samo.
Sprawdź poniższy przykład:
źródło
Można użyć promień, ale to nie będzie działać na IE:
border-radius: 5px 5px;
.źródło
źródło
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
źródło
Dodanie
css
właściwości:border-radius: 50%;
do dowolnego div czyni go okrągłym.
źródło
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:
źródło