html div长方形,求助，我想做一个带有凸起的 长方形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 事件