那些遇到过的问题

相关疑难解决方法(0)

双曲线形状

我目前正试图生成一个"波浪幽灵般的底部"形状.此形状包含两条双曲线:

形状有两条双曲线

虽然这个图像的底部部分我认为它描绘的是更好的图像.

我的守则

我当前尝试生成此形状是使用伪元素overflow: hidden,虽然这不允许渐变背景(需要简单的背景):

尝试1 - 使用隐藏溢出的伪元素

.bottom {
  height: 300px;
  width: 300px;
  background: lightgray;
  position: relative;
  overflow: hidden;
  margin-top:-150px;
  -webkit-transform:rotate(45deg);
  transform:rotate(45deg);
}
.bottom:before, .bottom:after{
  position: absolute;
  content: "";
  background: white; 
}
.bottom:before {
    height: 150%;
  width: 150%; 
  top: 50%;
  border-radius:50%;
  left: -45%;
}

.bottom:after {
    height: 200%;
  width: 100%; 
  bottom: -40%;
  border-radius:50%;
  left: 90%;
}
Run Code Online (Sandbox Code Playgroud) 
<div class="bottom"></div>
Run Code Online (Sandbox Code Playgroud)

尝试2 - 使用具有's'形状的伪元素

.bottom {
  background: lightgray;
  width: 300px;
  height: 300px;
  position: relative;
  overflow:hidden;
  color:white;
  border-radius:0 100% …
Run Code Online (Sandbox Code Playgroud)

css svg css3 css-shapes

jbu*_*483
2015 12-19
20
推荐指数
2
解决办法
4282
查看次数

标签 统计

css ×1

css-shapes ×1

css3 ×1

svg ×1