我正在尝试使此多边形的顶部和底部边缘变圆以使其与图标相同。有人知道我在做什么错吗?
.activity {
max-width: 200px;
}
.activity__icon {
border-right-radius: 50%;
text-align: center;
background-color: #eee;
clip-path: polygon(50% 20%, 100% 50%, 50% 80%, 0% 50%);
margin: 0 auto;
padding: 2rem;
}
.activity__icon i {
color: #707070;
border: 2px solid #707070;
border-radius: 50%;
max-width: fit-content;
padding: 15px;
font-size: 25px;
text-align: center;
vertical-align: middle;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<div class="activity">
<div class="activity__icon">
<i class="fas fa-play-circle"></i>
</div>
你无法对多边形进行倒圆角处理,因此使用转换是一个不同的想法:
.activity {
width: 200px;
}
.activity__icon {
text-align: center;
margin: 0 auto;
padding: 2rem;
position:relative;
z-index:0;
}
.activity__icon::before {
content:"";
position:absolute;
z-index:-1;
width:141px; /* 200px / sqrt(2) */
height:141px; /* 200px / sqrt(2) */
left:50%;
top:50%;
background-color: #eee;
transform:translate(-50%,-50%) rotate(45deg) rotate3d(1,-1,0,65deg);
border-radius: 28px 0 20px 0;
}
.activity__icon i {
color: #707070;
border: 2px solid #707070;
border-radius: 50%;
padding: 15px;
font-size: 25px;
text-align: center;
vertical-align: middle;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<div class="activity">
<div class="activity__icon"><i class="fas fa-play-circle"></i>
</div>