Pytania otagowane jako css-shapes

Kształty CSS są tworzone przy użyciu Cascade Styling Sheets do przekształcania elementów HTML w kształty i obrazy. Najbardziej podstawowe kształty obejmują trójkąty, kwadraty i koła, ale można je przekształcić w bardziej zaawansowane kształty, takie jak serca, ośmiokąty i gwiazdy.

20
Jak działają trójkąty CSS?
Czy jesteś zainteresowany w stosie Przepełnienie stosu w : CSS? Istnieje wiele różnych kształtów CSS w CSS Tricks - Shapes of CSS, a ja jestem szczególnie zaskoczony trójkątem: #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } <div id="triangle-up"></div> Uruchom …
3
Tworzenie menu promieniowego w CSS
Jak utworzyć menu, które wygląda tak ... Link do PSD Nie chcę używać obrazów PSD. Wolałbym używać ikon z niektórych pakietów, takich jak FontAwesome, i generować tła / css w CSS. Wersję menu używającą PSD do generowania obrazów podpowiedzi, a następnie używającą go można znaleźć tutaj .
321 css  tooltip  css-shapes 
12
Jak utworzyć łzy w HTML?
Jak utworzyć taki kształt, aby wyświetlał się na stronie internetowej? Nie chcę używać obrazów, ponieważ byłyby rozmyte podczas skalowania Próbowałem z CSS : .tear { display: inline-block; transform: rotate(-30deg); border: 5px solid green; width: 50px; height: 100px; border-top-left-radius: 50%; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; } <div class="tear"> </div> Uruchom fragment koduUkryj …
222 html  css  svg  css-shapes 
5
W jaki sposób ten CSS tworzy okrąg?
To jest CSS: div { width: 0; height: 0; border: 180px solid red; border-radius: 180px; } Jak tworzy koło poniżej? Załóżmy, że jeśli prostokąt ma szerokość 180 pikseli, a wysokość 180 pikseli, wyglądałoby to tak: Po zastosowaniu promienia granicy 30 pikseli wyglądałoby to tak: Prostokąt staje się coraz mniejszy, czyli …
206 html  css  css-shapes 
16
css: jak narysować okrąg z tekstem pośrodku?
Znalazłem ten przykład na stackoverflow: Narysuj okrąg przy użyciu samego CSS Który jest świetny. Ale chciałbym wiedzieć, jak zmodyfikować ten przykład, aby umieścić tekst w środku koła? Znalazłem również to: wyśrodkowanie tekstu w kółku w pionie i poziomie w CSS (jak znaczek powiadomienia na iPhonie) ale z jakiegoś powodu to …
156 css  css-shapes 
2
Border-radius w procentach (%) i pikselach (px) lub em
Jeśli użyję wartości piksela lub em dla border-radius, promień krawędzi jest zawsze łukiem kołowym lub kształtem pigułki, nawet jeśli wartość jest większa niż największy bok elementu. Kiedy używam procentów , promień krawędzi jest eliptyczny i zaczyna się na środku każdej strony elementu, co daje kształt owalu lub elipsy : Wartość …
124 css  css-shapes 
8
Kontroluj długość pociągnięcia kreskowanej granicy i odległość między pociągnięciami
Czy można kontrolować długość i odległość między kreskowanymi kreskami w CSS? Poniższy przykład wyświetla się inaczej w różnych przeglądarkach: div { border: dashed 4px #000; padding: 20px; display: inline-block; } <div>I have a dashed border!</div> Uruchom fragment koduUkryj wynikiRozwiń fragment Duże różnice: IE 11 / Firefox / Chrome Czy są …
124 css  border  css-shapes 
5
Niestandardowy kolor obramowania trójkąta CSS
Próbuję użyć niestandardowego koloru szesnastkowego dla mojego trójkąta CSS (obramowania). Jednak ponieważ używa właściwości granicznych, nie jestem pewien, jak to zrobić. Chciałbym omijać javascript i css3 tylko ze względu na kompatybilność. Staram się, aby trójkąt miał białe tło z obramowaniem 1px (wokół ściętych boków trójkąta) w kolorze # CAD5E0. czy …
114 css  border  css-shapes 
4
Koło postępu CSS [zamknięte]
Zamknięte. To pytanie nie spełnia wytycznych dotyczących przepełnienia stosu . Obecnie nie przyjmuje odpowiedzi. Chcesz poprawić to pytanie? Zaktualizuj pytanie, aby było na temat przepełnienia stosu. Zamknięte 5 lat temu . Popraw to pytanie Przeszukałem tę witrynę, aby znaleźć paski postępu, ale te, które udało mi się znaleźć, pokazują animowane …
10
Jak zrobić fantazyjną strzałkę za pomocą CSS?
Ok, więc wszyscy wiedzą, że możesz utworzyć trójkąt, używając tego: #triangle { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } A to tworzy solidny, wypełniony trójkąt. Ale jak zrobić trójkąt w kształcie pustej strzałki, taki jak ten?
102 html  css  css-shapes 
3
Kształt ze skośną stroną (responsywny)
Próbuję utworzyć kształt jak na poniższym obrazku z ukośną krawędzią tylko z jednej strony (na przykład z dołu), podczas gdy pozostałe krawędzie pozostają proste. Próbowałem użyć metody granicznej (kod podano poniżej), ale wymiary mojego kształtu są dynamiczne i dlatego nie mogę użyć tej metody. .shape { position: relative; height: 100px; …
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.