html - CSS 边框 - 没 Angular 框

Question

是否可以创建像图片上那样的边框？只需使用 css 边框属性。最终结果将是没 Angular 盒子。我不想添加额外的 html 元素。我只想为每个 li 元素添加 css 边框信息。

假设这是一个 ul - li 列表。

Answer 1

这是我尝试使用 :before 和 :after 伪元素和一些 CSS3 选择器

li{
    position: relative;
}
/* Add bottom border for all boxes except the last two */
li:not(:nth-last-child(2)):not(:last-child):after{
    content: '';
    position: absolute;
    bottom: 0;
    width: 50%;
    left: 25%;
    height: 2px;
    background-color: #ccc;
}
/* Add right border for all odd indexed boxes (1,3,5...) */
li:nth-child(2n+1):before{
    content: '';
    position: absolute;
    right: 0;
    height: 50%;
    top: 25%;
    width: 2px;
    background-color: #ccc;
}

Demo fiddle

---

您还可以使用 box-shadow 模拟边框，从而消除对伪元素的需要，但这种方法仅适用于您的框具有固定大小的情况，因为您无法拥有响应式阴影.

li:not(:nth-last-child(2)):not(:last-child){
   box-shadow: 0 53px 9px -56px #000;
}
li:not(:nth-last-child(2)):not(:last-child):nth-child(2n+1){
   box-shadow: 0 53px 9px -56px #000, 53px 0px 9px -56px #000;
}
li:nth-child(2n+1){
    box-shadow: 53px 0px 9px -56px #000;
}

Demo fiddle