Question

我正在尝试创建这样的东西：

我的代码是这样的，只能弯曲底部边框，我不能在其中放入任何内容，也没有任何底部阴影：

.curvedbox {
    position:fixed;
    top:0; left:0;
    width:100%;
    background:none;
    height:10%;
    padding-bottom:20%;
    overflow:hidden;
    z-index:1;
}
.curvedbox:after {
    content:'';
    position:absolute;
    left:-600%;
    width:1300%;
    padding-bottom:2300%;
    top:80%;
    background:none;
    border-radius:50%;
    box-shadow: 0px 0px 0px 9999px #526375;
    z-index:-1;

<div class="curvedbox"></div>

有人可以就此提出建议吗？

提前致谢。

Answer 1

如果你对另一种做法持开放态度......

＆＃13;

.curvedbox {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    background:none;
    height:10%;
    padding-bottom:20%;
    overflow:hidden;
    z-index:1;
}
.curvedbox:before, .curvedbox:after{
  content:'';
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:1200%;
  height:0;
  padding-bottom:1300%;
  border-radius:50%;
}
.curvedbox:before {
background-color:#526375;
}
.curvedbox:after {
  top:90%;
  background-color:white;
}

＆＃13;

<div class="curvedbox"></div>

＆＃13;

这很糟糕，top的{{1}}值可能需要根据您的需要进行更改。

Answer 2

考虑将内容分为三个部分：

第1部分：元素为上曲线或外曲线
第2部分：专门包含任何内容的元素
第3部分：下曲线或内曲线的元素（我们将声明插入 box-shadow属性到）

将这些部分嵌套在包含元素中，如下面嵌入的代码片段所示。

代码段示范：

＆＃13;

* {
  box-sizing: border-box;
  font-family: arial;
}

.containing-curves {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 300px;
  background: none;
  overflow: hidden;
}

.inner-curve {
  height: 50px;
  border-top-left-radius: 100%;
  border-top-right-radius: 100%;
  background: #d2d2d2;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -25px;
  box-shadow: inset 1px 1px 5px 3px #505050;
}

.inner-content {
  display: flex;
  justify-content: space-evenly;
  height: 100%;
  align-items: center;
  background: gray;
  position: relative;
  margin-top: 25px;
  padding-bottom: 25px;
}

.outer-curve {
  height: 50px;
  border-top-left-radius: 100%;
  border-top-right-radius: 100%;
  background: #808080;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.inner-content span {
  width: 100%;
  text-align: center;
}

＆＃13;

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">

<div class="containing-curves">
  <div class="outer-curve"></div>
  <div class="inner-content">
    <span><i class="fa fa-cloud"></i></span>
    <span>text</span>
    <span><small>text</small><br><small>text</small></span>
  </div>
  <div class="inner-curve"></div>
</div>

＆＃13;

顶部和底部边框是否弯曲，底部是否有阴影？

2 个答案: