css – 双曲形

前端之家收集整理的这篇文章主要介绍了css – 双曲形前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我目前正试图产生一个“波浪般的鬼底”形状。这个形状包含两条双曲线:

尽管this image底部,我认为它更好地描绘了它。

我的代码

我的当前尝试生成这种形状是使用伪元素和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%;
}
<div class="bottom"></div>

尝试2 – 使用’s’形状的伪元素

.bottom {
  background: lightgray;
  width: 300px;
  height: 300px;
  position: relative;
  overflow:hidden;
  color:white;
  border-radius:0 100% 0 100%;
}
.bottom:before{
  content:"S";
  position:absolute;
  height:100%;
  width:100%;
  top:-100%;
  left:-75%;
  font-size:60em;
  font-family: 'arial';
  }

.bottom:after{
  content:"S";
  position:absolute;
  height:100%;
  width:100%;
  top:-150%;
  left:-75%;
  font-size:60em;
  font-family: 'arial';
  }
<div class="bottom"></div>

尝试3 – 额外的元素和盒子阴影

我最近也试过使用盒子阴影和额外的元素(我可以这样做),但是即使如此,我无法正确地创建它:

.bottom {
    height:300px;
    width:300px;
    position:relative;
    overflow:hidden;
}
.bottom-left {
    position:absolute;
    top:50%;
    left:-50%;
    height:100%;
    width:100%;
    border-radius:50%;
    Box-shadow: inset -35px 35px 0px -24px rgba(50,50,1);
    z-index:8;
    background:white;
}
.top {
    position:absolute;
    height:100%;
    top:-35%;
    left:0;
    width:50%;
    border-radius:50%;
    z-index:8;
    background:gray;
    Box-shadow:inset 35px -35px 0px -24px rgba(50,1);
}
.top-right {
    position:absolute;
    top:-80%;
    left:45%;
    height:120%;
    width:100%;
    border-radius:50%;
    Box-shadow:inset 35px -35px 0px -24px rgba(50,1);
    border:20px solid gray;
}
.bigone {
    position:absolute;
    top:0;
    left:-20%;
    height:105%;
    width:100%;
    border-radius:50%;
    Box-shadow:inset -35px -35px 0px -24px rgba(50,1);
    -webkit-transform:rotate(-30deg);
    transform:rotate(-30deg);
    -webkit-transform-origin:center center;
    transform-origin:center center;
    background:gray;
}
<div class="bottom">
    <div class="bottom-left"></div>
    <div class="top"></div>
    <div class="top-right"></div>
    <div class="bigone"></div>
</div>

这些方法似乎都不容易产生这种双重弯曲的形状,并且将需要一个“有色背景”

注意:我不愿意使用SVG,因为我使用纯css完成了90%的“整体形状”,所以没有一个svg元素就可以完成这个任务

内部形状将是一个块颜色,但边框在我的设计中不是强制性/关键性的。

this is where I would like to add it to

更新

> This is closest I’ve been able to get

解决方法

考虑到:

>需要的代码
>对齐双曲线的麻烦

CSS似乎没有办法去这里,SVG的方式比较合适。要说明,请看这两个片段:

SVG

DEMO

/*** FOR THE DEMO **/
svg{
    display:block;
    width:70%;
    margin:0 auto;
    opacity:0.8;
}
body{
    background: url('http://lorempixel.com/output/people-q-g-640-480-7.jpg');
    background-size:cover;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 80">
    <path stroke-width="1" stroke="#000" fill="grey" d="M95 5 Q70 20 70 38 T50 65 Q55 50 30 40 T5 5z"/>
</svg>

CSS

DEMO(考虑到我只在形状的右侧做了一个双曲线)

.ghost {
  position: relative;
  width: 400px;
  height: 300px;
  margin: 0 auto;
  overflow: hidden;
}
.ghost:before,.ghost:after {
  content: '';
  position: absolute;
}
.ghost:before {
  bottom: 0;
  right: 50%;
  width: 70%;
  height: 30%;
  transform-origin: 100% 100%;
  transform: skewY(30deg) rotate(20deg);
  Box-shadow: -100px -100px 0px 99px #656565;
  border-top-right-radius: 30% 100%;
}
.ghost:after {
  top: 0;
  right: 0;
  transform-origin: 100% 0;
  transform: skewX(-10deg) rotate(-20deg);
  Box-shadow: none;
  height: 107px;
  width: 173px;
  border-top-left-radius: 90% 100%;
  Box-shadow: -30px -30px 0px 29px #656565,60px -110px 0px 109px #656565;
}
<div class="ghost">
</div>

请注意,我没有列出在这种情况下使用svg的优点(响应性,输出质量,曲线控制,边框,边框颜色/不透明度,填充颜色/不透明度,透明度,可维护性,构建形状的时间等) …)

原文链接:https://www.f2er.com/css/219286.html

猜你在找的CSS相关文章