Bir satırdaki üçgenler HTML / CSS web tasarımı

-2

Şu anda bir sınıf için bir web sitesi tasarlıyorum ve üçgen oluşturmak için nasıl bir elmas oluşturacağımı bulmakta güçlük çekiyorum.

Yardımlarınız için teşekkürler.

İşte sayfa:

İnternet sayfası

İşte KOD:

HTML Kodu

CSS kodu pg1

CSS kodu pg2

CSS kodu pg3

— Ahkil Jackson
kaynak

Merhaba Ahkil, kodu bir JSFiddle

— mcalex

Lütfen görüntü değil, kod, hata ve verileri metin olarak ekleyin ( kod biçimlendirmesini kullanarak ). Resimler: A) test için kod / hataları / verileri kopyalamamıza ve yapıştırmamıza izin vermez; B) kod / hata / veri içeriğine göre arama yapmanıza izin vermeyin; ve daha birçok sebep . Genel olarak, >>>> kod / hatalar / veriler >>>> resim olarak kod / hatalar / veriler >> hiçbir şey. Resimler yalnızca kod biçimindeki metne ek olarak , görüntünün yalnızca metin kodu / hata / veri tarafından iletilmeyen önemli bir şey eklemesi durumunda kullanılmalıdır .

— Makyen

Mümkünse HTML öğeleri yerine SVG kullanmanızı öneririm. Eğer html elemanlarını kullanmak zorundaysanız, aşağıdakine benzer bir şey yapabilirsiniz:

.diamond {
  position: relative;
  display:inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 50px 50px 50px 0;
  border-color: transparent #007bff transparent transparent;
}
.diamond:after {
  content:'';
  position: relative;
  display:inline-block;
  top:-50px;
  left:50px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 50px 0 50px 50px;
  border-color: transparent transparent transparent #007bff;
}

html ile kullanılır:

<div class="diamond"></div>

Kod Kalemi

— ttaylor1218
kaynak