作者:许雅惠嘉文意芝 | 来源:互联网 | 2023-05-22 18:42
我的网站上有以下设计.如何才能实现这种反转圆角效果?
我相信有几种方法.我正在寻找最简单,最优雅的方式来做到这一点.
如果你能在答案中分享一个人,我会很高兴.
1> jbutler483..:
一个简单的(但可能是有缺陷的,因为我目前正在使用设定值)解决方案是使用伪效果:
您也可以悬停片段以查看其构造方式:
html,
body {
margin: 0;
padding: 0;
}
.upper {
height: 300px;
width: 540px;
background: gray;
position: relative;
}
.circle {
border-radius: 50%;
background: tomato;
height: 100px;
width: 100px;
line-height:100px;
display: inline-block;
position: absolute;
bottom: -70px;
left: 200px;
border: 20px solid white;
text-align:center;
transition:all 0.8s;
}
.circle:hover{
border: 20px solid tomato;
background:lightgray;
}
.upper:before {
content: "";
position: absolute;
border-radius: 0 0 25px 0;
background: gray;
height: 50px;
width: 200px;
bottom: -25px;
transition:all 0.8s;
}
.upper:after {
content: "";
position: absolute;
border-radius: 0 0 0 25px;
background: gray;
height: 50px;
width: 200px;
bottom: -25px;
transition:all 0.8s;
right: 0;
}
.upper:hover:before,.upper:hover:after{
background:tomato;
}