Listelenen ögelerde border-radius problemi

ugurozgen 916 gün önce

360 defa görüntülendi

Merhabalar,

Sohbet platformu için gelen giden mesaj listesi yapıyorum. Benim şöyle bir listem var.

Bu yapının şöyle olmasını istiyorum.

Kodlarım bunlar. Bu yapı üzerinden bu tasarımı çıkarmak istiyorum. Yoksa farklı yöntemlerle de yapılabilir ama ben tek liste olsun istiyorum.

<ul>
  <li class="out">1</li>
  <li>2</li>
  <li>3</li>
  <li class="out">4</li>
  <li class="out">5</li>
  <li>6</li>
  <li class="out">7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li class="out">11</li>
</ul>

ul {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
ul li {
    padding: 5px 10px;
    display: block;
    color: white;
    background: #444;
    height: 30px;
    list-style-type: none;
}
ul li.out {
    background: cornflowerblue;
}

Şimdiden teşekkür ediyorum.

Soru hatalı mı? 👎

Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!

Spam olarak işaretle

Cevaplar (1)

yasinatesim

916 gün önce

HTML yapına uygun CSS class'ları ile çözüm üretebilirsin tek liste içinde.

Eğer liste dinamik geliyorsa class isimlerini dinamik şekilde if koşulları ile ekletip / çıkartman gerekebilir

HTML kodların;

<ul>
  <li class="out rounded">1</li>
  <li class="brtlr">2</li>
  <li class="brblr">3</li>
  <li class="out" class="brtlr">4</li>
  <li class="out brblr">5</li>
  <li class="rounded">6</li>
  <li class="out rounded">7</li>
  <li class="brtlr">8</li>
  <li>9</li>
  <li class="brblr">10</li>
  <li class="out rounded">11</li>
</ul>

CSS kodların;

ul {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
ul li {
    padding: 5px 10px;
    display: block;
    color: white;
    background: #444;
    height: 30px;
    list-style-type: none;
}
ul li.out {
    background: cornflowerblue;
}

/* Border Radius Top Left and Right */
.brtlr {
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
}

/* Border Radius Bottom Left and Right */
.brblr {
	border-bottom-left-radius: 12px;
	border-bottom-right-radius: 12px;
}

/* Border Radius Full */

.rounded {
	border-radius: 12px;
}

#007958