这里的第一个问题所以请善待!我正在设计一个网站,并且我被要求以正弦边框框架图片.到目前为止,我已经通过创建一个带有3个div的容器div来解决它:第一个用于向下弯曲,第二个用于直线(我考虑的是稍后将其移除的想法)而第三个用于向上弯曲弯曲.
Here’s a screenshot of the current state
所以这是当前的代码:
.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>
我真的想弄清楚如何将最后一段变成白色,因为它是通过围绕右下角创建的,所以白色背景必须在div之外.
我知道这可能是一个愚蠢的问题,但在这里!谢谢!
*编辑:对不起大家,这里是我正在尝试做的图像] 2
最佳答案 它需要对间距进行微调,但沿着这些线条会有什么变化? (我使用黑/白背景来显示部分,但这些可以交换甚至透明.
body{background-color:black;}
.border{
overflow: hidden;
align-items: center;
height: auto;
width: 100%;
display: flex;
background-color:white;
}
.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;
background-color:black;
}
.bord2 {
margin-top: 4vh;
flex: 1;
display: inline;
height: 4vh;
border-top: 5px solid #e4ae03;
background-color:black;
}
.bord3{
border-bottom: 5px solid;
border-color: transparent transparent #e4ae03 transparent;
border-radius: 0 0 100% 0;
background-color:white;
height:4vh;
}
.bord3-layer{
flex: 1;
height: 9vh;
display: block;
background-color:black;
}
<!DOCTYPE html>
<HTML>
<head>
<style>
</style>
</head>
<body>
<div class="border">
<div class="bord1 top top-bord"></div>
<div class="bord2 top top-bord"></div>
<div class="bord3-layer">
<div class="bord3 bottom"></div>
</div>
</div>
</body>
</HTML>