求助，我想做一个带有凸起的 长方形div，怎么才能实现？

Question

我想做一个这种形状的 div

代码如下

<div class='leftSide'>
        <div class='qq_number fl'>
            <div>相亲QQ群[1]</div>
  
            <div>相亲QQ群[2]</div>
         
            <div>相亲QQ群[3]</div>
     
            <div>相亲QQ群[4]</div>
   
            <div>相亲QQ群[5]</div>
 
        </div>
        

        <div class="join_us fl">
            加<br />入<br />我<br />们
        </div>
        
        
    </div>

.leftSide {
    height: 300px;
    background: rgba(0,0,204,0);
    position: fixed;
    top: 50%;
    margin-top: -100px;
    z-index: 100;
    left: -120px;
}

.qq_number {
    width: 120px;
    background: rgba(0,255,0,1);
    height: 100%;
    cursor: pointer;
}

.join_us {
    width: 30px;
    height: 150px;
    background: rgba(204,0,0,1);
    margin-top: 75px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    cursor: pointer;
    margin-left: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;
    color: rgba(255,255,255,1);
}

这时候遇到问题就是 .leftSide:hover时，在【加入我们】的上下的空白处也会有 hover事件

请问如何才能做出一个 div， 左半边的比较大，右半边比较小

我修改后下

.leftSide:hover .join_us{
    animation: bounceInRight 0.5s 1;
    animation-direction: normal;
    -webkit-animation-direction: normal; /* Safari 和 Chrome */
    animation-fill-mode : forwards;
}

.leftSide:hover .qq_number {
    animation: bounceInRight 0.5s 1;
    animation-direction: normal;
    -webkit-animation-direction: normal; /* Safari 和 Chrome */
    animation-fill-mode : forwards;
}

但是空白处还是会触发 hover 事件

Answer 1

可以换一下布局，右侧的加入我们是绝对布局

参考如下

这种情况下，右侧空白处是不会有hover的

.box{
    width: 200px;
    height: 200px;
    position: relative;
    background: yellowgreen
}

.side{
    position: absolute;
    right: -50px;
    width: 50px;
    height: 100px;
    top: 50px;
    background: violet;
}

.box:hover{
    background: turquoise;
}

<div class="box">
    <div class="side"></div>
</div>

Answer 2

可以看看::after伪元素