html - 在 DIV 内的 DIV 元素之间创建半个边框

Question

我正在尝试在 CSS 的帮助下使用 ::after 在 DIV 元素中包含的 DIV 元素之间创建半边框。不幸的是，这只会在包含 DIV 元素的外部呈现边框。我将不胜感激。

这是我的代码:

HTML:

<div class="menu">
    <div class="subDiv1">Foo</div>
    <div class="subDiv2">Bar</div>
    <div class="subDiv3">Baz</div>
</div>

CSS:

.menu {
    position: relative;
    display: inline-block;
    float: left;
    padding: 0 10px;
    margin-left:auto;
    margin-right:auto;
    width: 75%;
    height: 150px;
    position: relative;
    margin-top: 2%;
    border-width: 1px;
    border-style: thin solid;
    border-color: #008040;
    overflow: hidden;
    box-shadow: 0 0 10px 1px #7e8083;

}
.subDiv1 {
    width: 33%;
    height: 150px;
    background-color: #fff;
    float: left;
    color:  #7e8083;
}
.subDiv1::after {
    content:""; 
    background: black; 
    position: absolute; 
    bottom: 25%; 
    right: 0; 
    height: 50%; 
    width: 1px;
}

.subDiv2 {
    width: 33%;
    height: 150px;
    background-color: #fff;
    float: left;
    color:  #7e8083;
}
.subDiv2::after {
    content:""; 
    background: black; 
    position: absolute; 
    bottom: 25%; 
    right: 0; 
    height: 50%; 
    width: 1px;
} 

.subDiv3 {
    width: 33%;
    height: 150px;
    background-color: #fff;
    float: left;
    color:  #7e8083;
}

https://jsfiddle.net/2yGQD/1727/

Answer 1

添加position:relative于你的分割

.subDiv1 {
position:relative;
width: 20%;
height: 150px;
background-color: #fff;
float: left;
color:  #7e8083;
}