我在页脚中制作 曲线 时遇到问题
任何人都可以帮助我像这样建立页脚:
答案 0 :(得分:1)
根据css skew element and get inner rounded border top,这可能是您的解决方案:
.footer {
height: 100px;
position: relative;
overflow: hidden;
background-color: green;
}
.content {
position: absolute;
top: 40%;
left: 5px;
}
.footer:before,
.footer:after {
content: "";
vertical-align: top;
display: inline-block;
transform-origin: top right;
transform: skew(-40deg);
}
.footer:before {
height: 100%;
width: 50%;
border-radius: 0 0 40px 0;
background: lightgrey;
}
.footer:after {
height: 40px;
width: 40px;
margin-left: -1px;
background: radial-gradient(circle at bottom right, transparent 68%, lightgrey 70%);
}
<div class="footer"><div class="content">text goes here</div></div>
答案 1 :(得分:0)
尝试一下
:root {
--bg-color: #12633a;
--fg-color: #eaeaea;
--radius: 80px;
}
.container {
display: flex;
}
.left {
background: var(--fg-color);
height: 250px;
flex-grow: 1;
}
.right {
background: var(--bg-color);
height: 250px;
flex-grow: 1;
}
.clip {
width: 300px;
overflow: hidden;
}
.d {
display: flex;
background: var(--fg-color);
justify-content:center;
width: 500px;
margin-left:-100px;
}
.d1 {
background: var(--fg-color);
height: 250px;
width: 250px;
border-bottom-right-radius: calc(var(--radius));
transform: skewX(-30deg);
}
.d2 {
background: var(--bg-color);
}
.d3 {
background: var(--bg-color);
height: 250px;
width: 250px;
border-top-left-radius: var(--radius);
transform: skewX(-30deg);
}
<div class="container">
<div class="left"></div>
<div class="clip">
<div class="d">
<div class="d2"><div class="d1"></div></div>
<div class="d3"></div>
</div>
</div>
<div class="right"></div>
</div>