双曲线形状 [英] Double curved shape
问题描述
我目前正试图产生一个波浪鬼的底部形状。此形状包含两个双曲线：
虽然
我的当前尝试生成此形状时使用伪元素和 overflow：hidden ，尽管这不允许渐变背景（需要一个简单的背景）：
尝试1 - 使用溢出隐藏的伪元素
.bottom {height：300px; width：300px;背景：lightgray;位置：相对; overflow：hidden; margin-top：-150px; -webkit-transform：rotate（45deg）; transform：rotate（45deg）;}。bottom：before，.bottom：after {position：absolute; content：;背景：白色; } .bottom：before {height：150％;宽度：150％; top：50％; border-radius：50％; left：-45％;}。bottom：after {height：200％;宽度：100％;底部：-40％; border-radius：50％; left：90％;}
< div class = bottom>< / div>
2 - 使用具有形状的伪元素
.bottom {background：lightgray; width：300px; height：300px;位置：相对; overflow：hidden;颜色：白色; border-radius：0 100％0 100％;}。bottom：before {content：S; position：absolute;高度：100％; width：100％;顶部：-100％;左：-75％; font-size：60em; font-family：'arial'; } .bottom：after {content：S; position：absolute;高度：100％; width：100％;顶部：-150％;左：-75％; font-size：60em; font-family：'arial'; }
< div class =bottom> ; / div>
尝试3 - 框阴影
我最近也试过使用框阴影和额外的元素（我会确定），但即使这样，
.bottom {height：300px; width：300px;位置：相对; overflow：hidden;}。bottom-left {position：absolute; top：50％;左：-50％;高度：100％; width：100％; border-radius：50％; box-shadow：inset -35px 35px 0px -24px rgba（50，50，50，1）; z-index：8; background：white;}。top {position：absolute;高度：100％;顶部：-35％; left：0; width：50％; border-radius：50％; z-index：8;背景：灰色box-shadow：inset 35px -35px 0px -24px rgba（50，50，50，1）;}。top-right {position：absolute;顶部：-80％;左：45％;高度：120％; width：100％; border-radius：50％; box-shadow：inset 35px -35px 0px -24px rgba（50，50，50，1）; border：20px solid gray;}。bigone {position：absolute; top：0;左：-20％;身高：105％ width：100％; border-radius：50％; box-shadow：inset -35px -35px 0px -24px rgba（50，50，50，1）; -webkit-transform：rotate（-30deg）; transform：rotate（-30deg）; -webkit-transform-origin：center center; transform-origin：center center; background：grey;}
< div class = > < div class =bottom-left>< / div> < div class =top>< / div> < div class =top-right>< / div> < div class =bigone>< / div>< / div>
这些方法似乎都不容易生成这种双曲面形状，并且需要一个块状的彩色背景。
将不愿意使用SVG，因为我有90％的整体形状完成使用纯CSS，所以这将是很好/很好，完成这个没有一个svg元素
内部形状将是块颜色，但边框在我的设计中不是强制的/关键的。
更新 $ b
考虑：
- 所需的代码量
- 调整双曲线的麻烦
CSS似乎不是去这里的方法，SVG 更合适。要说明，请参阅以下两个片段：
SVG
/ *** FOR THE DEMO ** / svg {display：block;宽度：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/svgviewbox =0 0 100 80> < path stroke-width =1stroke =＃000fill =greyd =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;右：50％;宽度：70％;身高：30％转化来源：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的优点（响应，输出质量，曲线控制，边框，边框颜色/不透明度，填充颜色/透明度，透明度，可维护性，建立形状的时间量...）
I am currently attempting to generate a 'wavy ghostly bottom' shape. This shape contains two double curves:
Although the bottom part of this image I think portrays it in better imagery.
My Code
My Current Attempt to generate this shape was using pseudo elements and overflow: hidden, although this does not allow for a gradient background (would require a plain background):
Attempt 1 - Using Pseudo Elements with overflow hidden
.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>
Attempt 2 - Using Pseudo Elements with 's' shape
.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>
Attempt 3 - extra elements and box shadows
I also have recently tried using box shadows and extra elements (which i would be ok with), but even then, I can't create it properly:
.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, 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, 50, 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, 50, 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, 50, 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>
None of these approaches seem to allow the generation of this double curved shape easily, and would require a 'block coloured background'
Note: I would be reluctant to resort to SVG since I have 90% of the 'overall shape' completed using just pure css, so It would be good/nice to complete this without an svg element
The internal shape would be a block color, but the border isn't compulsory/critical in my design.
this is where I would like to add it to
Update
Considering :
- the amount of code needed
- the hassle of aligning double curves
CSS doesn't seem to be the way to go here and SVG way more appropriate. To illustrate, see these two snippets :
SVG
/*** 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 (consider I only made one double curve on the right side of the shape)
.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>
Note that I didn't list out the advantages of using an svg in this case (responsiveness, quality of output, curve control, border, border color/opacity, fill colour/opacity, transparency, maintainability, amount of time to build the shape...)
这篇关于双曲线形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
