如何使用如下附件中的定界符制作胶囊形状 div？

Question

是否可以使用没有设置宽度或高度的 border-radius 制作胶囊形状并包含在定界符之间？

Answer 1

是的，你可以这样试试

.container {
    width: 90%;
    padding:20px;
    margin: 10px auto;
    background:#000;
}
ul {
    list-style: none;
    padding: 7px;
    background: #333;
    border-radius: 12px;
    display: inline-flex;
}

li {
    padding: 0 10px;
    border-right: 1px solid #999;
    line-height: 1;
    color: #999;
    font-size: 12px;
    display: inline-block;
    vertical-align: middle;
}

li:last-child {
    border-right: none;
}

<div class="container">
    <ul>
      <li>abc</li>
      <li>def</li>
      <li>ghi</li>
    </ul>
</div>

如何使用如下附件中的定界符制作胶囊形状 div？

How to do Capsule shape div with delimiter like below attachment?

html

css

ionic2