用两种颜色和s曲线制作页脚

时间:2019-01-28 10:48:20

标签: html css

我在页脚中制作 曲线 时遇到问题

任何人都可以帮助我像这样建立页脚:

image:

2 个答案:

答案 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>