如何用css，js实现如图效果

Posted 2023-03-09

div边框是怎么去除一部分的..

左右2个div

position:absolute;

左边保留上下左3个边，右侧保留上下左右4个边

左面z-index大于右边，让左面div压过右面div，压过的宽度正好是边框宽即可，简单示例

.left
    position:absolute;
    left:0;
    top:0;
    width:100px;
    height:100px;
    border:1px solid #CCC;
    border-right:none;
    z-index:2;

.right
    position:absolute;
    left:100px;
    top:0;
    width:200px;
    height:150px;
    border:1px solid #CCC;
    z-index:1;
<div style="position:relative">
    <div class="left"></div>
    <div class="right"></div>
</div>追问

没有效果....

追答.left
    background:#FFF;

left加上背景色就行了

参考技术A 可也分别设置border-top border-right border-left border-bottom四个个属性，从而控制每一边的显示情况。