Css弯曲的页脚

时间:2017-10-21 11:21:05

标签: css css3 background border

只能用css实现这个页脚? enter image description here

由于

1 个答案:

答案 0 :(得分:2)

请试试这个:

.container {
  background: yellow;
  height: 180px;
  width: 400px;
}

.box {
  width:400px;
  height:80px;
  background-color: white;
  border:1px solid white;
  border-width:0 0 13px 0;
  margin:1rem auto;
  -webkit-border-radius:0% 0% 50% 50% / 0% 0% 50% 50%;
  -moz-border-radius:0% 0% 50% 50% / 0% 0% 50% 50%;
  border-radius:0% 0% 50% 50% / 0% 0% 50% 50%;
}
<div class="container"><div class="box"></div></div>