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

bVbiOJr?w=200&h=394

我想做一个这种形状的 div

代码如下

相亲QQ群[1] 相亲QQ群[2] 相亲QQ群[3] 相亲QQ群[4] 相亲QQ群[5]




.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 事件


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部