«css-shapes» etiketlenmiş sorular

En çok görüntülenen : Stack Overflow, CSS? CSS Tricks'te birçok farklı CSS şekli var - Şekiller CSS ve özellikle bir üçgenle şaşkınım: #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> Kod snippet'ini çalıştırSonuçları gizleSnippet'i genişlet Nasıl ve …

1846 css  geometry  polygon  css-shapes 

Şöyle bir menü nasıl oluştururum ... PSD'ye bağlantı PSD görüntülerini kullanmak istemiyorum. FontAwesome gibi bazı paketlerden simgeleri kullanmayı tercih ediyorum ve arka planlar / css CSS'de oluşturulmuş. Menünün, araç ipucunun görüntülerini oluşturmak için PSD'yi kullanan ve ardından kullanan bir sürümü burada bulunabilir .

321 css  tooltip  css-shapes 

Bu görüntüdeki gibi bir dairenin içindeki bir sayıyı çevrelemek istiyorum: Bu mümkün mü ve nasıl başarılıyor?

250 html  css  css-shapes 

Ortalanmış bir kelimeden oluşan bir web sayfam olmasını istiyorum. Bu kelimenin bir animasyonla çizilmesini istiyorum, böylece sayfa kelimeyi yaptığımız gibi "yazıyor", yani bir noktada başlıyor ve sonuçta bir glif olacak şekilde zaman içinde çizgiler ve eğriler çiziyor. Bunun <canvas>DOM ile mi yoksa DOM ile mi yapıldığı umurumda değil ve JavaScript …

229 javascript  css  canvas  html5-canvas  css-shapes 

Bir web sayfasında görüntülemek için böyle bir şekli nasıl oluştururum? Ölçeklendirmede bulanıklaşacakları için görüntüleri kullanmak istemiyorum CSS ile denedim : .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> Kod snippet'ini çalıştırHide resultsSnippet'i genişlet Bu …

223 html  css  svg  css-shapes 

Bu CSS: div { width: 0; height: 0; border: 180px solid red; border-radius: 180px; } Aşağıdaki daireyi nasıl üretiyor? Bir dikdörtgen genişliği 180 piksel ve yüksekliği 180 piksel ise, şöyle görünür: Sınır yarıçapı 30 piksel uygulandıktan sonra şu şekilde görünecektir: Dikdörtgen küçülüyor, yani yarıçap boyutu arttığında neredeyse kaybolacak. Peki, 180 …

206 html  css  css-shapes 

Dairesel div oluşturmanın şimdi yaptığımdan daha kolay bir yolu olup olmadığını merak ediyorum. Şu anda, her farklı boyut için bir resim yapıyorum, ancak bunu yapmak can sıkıcı. Dairesel olan div yapmak için CSS kullanarak yine de var mı ve yarıçapı belirtebilir miyim?

183 html  css  geometry  css-shapes 

Stackoverflow bu örneği buldum: Yalnızca css kullanarak Circle çizin Hangi harika. Ama dairenin ortasına metin ekleyebilmem için bu örneği nasıl değiştireceğimi bilmek isterim? Bunu da buldum: Metni CSS'deki daire içinde dikey ve yatay olarak merkezleme (iphone bildirim rozeti gibi) ama nedense benim için çalışmıyor. Aşağıdaki test kodunu oluşturduğumda: <div class="badge">1</div> …

156 css  css-shapes 

CSS'de kesikli kenar çizgileri arasındaki uzunluğu ve mesafeyi kontrol etmek mümkün müdür? Aşağıdaki bu örnek, tarayıcılar arasında farklı şekilde görüntülenir: div { border: dashed 4px #000; padding: 20px; display: inline-block; } <div>I have a dashed border!</div> Kod parçacığını çalıştırınHide resultsSnippet'i genişlet Büyük farklar: IE 11 / Firefox / Chrome Kesikli …

124 css  border  css-shapes 

Kenarlık yarıçapı için bir piksel veya em değeri kullanırsam, kenar yarıçapı, değer öğenin en büyük kenarından büyük olsa bile her zaman dairesel bir yay veya hap şeklidir . Yüzdeleri kullandığımda , kenar yarıçapı eliptiktir ve öğenin her iki yanının ortasından başlayarak oval veya elips bir şekil oluşturur : Kenarlık yarıçapı …

124 css  css-shapes 

HTML5 ve CSS3 kullanarak nasıl daire çizersiniz? İçeri metin koymak da mümkün mü?

118 html  css  geometry  css-shapes 

CSS üçgenim (kenarlık) için özel bir onaltılık renk kullanmaya çalışıyorum. Ancak sınır özelliklerini kullandığı için bunu nasıl yapacağımdan emin değilim. Sadece uyumluluk nedeniyle javascript ve css3'ten uzak durmak istiyorum. Üçgenin # CAD5E0 rengiyle 1px kenarlığı (üçgenin açılı kenarları etrafında) beyaz bir arka planına sahip olmasını sağlamaya çalışıyorum. Mümkün mü? Şimdiye …

114 css  border  css-shapes 

Kapalı. Bu soru Yığın Taşması yönergelerini karşılamıyor . Şu anda cevapları kabul etmiyor. Bu soruyu geliştirmek mi istiyorsunuz? Yığın Taşması için konuya uygun olması için soruyu güncelleyin . 5 yıl önce kapalı . Bu soruyu geliştirin İlerleme çubuklarını bulmak için bu web sitesinde arama yaptım, ancak bulabildiklerim% 100'e kadar giden …

112 html  css  progress-bar  progress  css-shapes 

Tamam, böylece herkes bunu kullanarak bir üçgen yapabileceğinizi bilir: #triangle { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } Ve bu, üçgenle dolu bir katı oluşturur. Peki bunun gibi içi boş ok benzeri bir üçgeni nasıl yaparsınız?

102 html  css  css-shapes 

Aşağıdaki resimdeki gibi sadece bir tarafta (örneğin alt tarafta) eğimli kenar diğer kenarlar düz kalırken bir şekil oluşturmaya çalışıyorum . Border yöntemini kullanmayı denedim (kod aşağıda verilmiştir) ancak şeklimin boyutları dinamik ve bu nedenle bu yöntemi kullanamıyorum. .shape { position: relative; height: 100px; width: 200px; background: tomato; } .shape:after { …

93 html  css  responsive-design  css-shapes