CSS聊天消息边框半径怎么做？ [复制]

Question

我正在为聊天平台制作传入和传出消息的列表。我有这样的清单。

View preview

我想做类似的事情。

View preview

我想改变这个结构。我该怎么做呢。这是我的代码。

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;
}

<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>

Answer 1

你可以像下面这样，检查代码中的cmets：

ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

ul li.out {
  background: cornflowerblue;
}
ul li {
  padding: 5px 10px;
  position:relative;
  z-index:0;
  color: white;
  background: #444;
  height: 30px;
  list-style-type: none;
  border-radius:10px; /* border radius to all */
}

/* remove top radius if the next one is the same*/
.out + .out,
:not(.out) + :not(.out) {
  border-radius:0 0 10px 10px;
}
/* create a pseudo element to overlap the bottom radius of the previous one */
.out + .out:after,
:not(.out) + :not(.out):after {  
  content:"";
  position:absolute;
  z-index:-1;
  background:inherit;
  left:0;
  right:0;
  height:10px;
  bottom:calc(100% + 10px);
}

<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>