这是我的第一个问题,请多包涵!我正在设计一个网站,被要求在图片周围加上正弦波形的边框。到目前为止,我已经通过创建一个容器div和3个子div来实现:第一个用于向下弯曲,第二个是直的(我考虑以后删除它),第三个用于向上弯曲。 这里是当前状态的截图 以下是当前的代码:
.border {
overflow: hidden;
align-items: center;
height: auto;
width: 100%;
display: flex;
}
.bord1 {
margin-top: 4vh;
height: 4vh;
flex: 1;
border-top: solid 5px;
border-color: #e4ae03 rgba(0, 0, 0, 0) transparent transparent;
border-radius: 100% 0 0 0;
z-index: 999;
}
.bord2 {
margin-top: 4vh;
flex: 1;
display: inline;
height: 4vh;
border-top: 5px solid #e4ae03;
}
.bord3 {
margin-top: -4vh;
flex: 1;
height: 4vh;
display: block;
border-bottom: 5px solid;
border-color: transparent transparent #e4ae03 transparent;
border-radius: 0 0 100% 0;
}
<div class="border">
<div class="bord1 top top-bord"></div>
<div class="bord2 top top-bord"></div>
<div class="bord3 bottom"></div>
</div>
![![](https://istack.dev59.com/oFQQv.webp)