双弧形

2024-05-21

我目前正在尝试生成“波浪形幽灵底部”形状。该形状包含两条双曲线:

虽然底部的部分这个图片 http://images.clipartpanda.com/ghost-clip-art-castle-ghost-clipart1.jpg我认为以更好的形象来描绘它。


My Code

我当前尝试生成此形状是使用伪元素和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, 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>

这些方法似乎都无法轻松生成这种双曲线形状,并且需要“块色背景”

注意:我不愿意诉诸 SVG,因为我仅使用纯 css 完成了 90% 的“整体形状”,所以完成这个会很好/很好没有 svg 元素


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

这是我想将其添加到的地方 http://jsfiddle.net/jbutler483/x65qkh3k/22/


Update

  • 这是我能得到的最接近的 http://jsfiddle.net/jbutler483/r3cn1ea0/2/

考虑到:

  • 所需的代码量
  • 对齐双曲线的麻烦

CSS 似乎不适合这里,而 SVG方式更合适。为了说明这一点,请参阅以下两个片段:

SVG

DEMO http://jsfiddle.net/webtiki/L9zknmn5/

/*** 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 http://jsfiddle.net/webtiki/fwbcqgd8/(考虑到我只在形状的右侧制作了一条双曲线)

.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 的优点(响应能力、输出质量、曲线控制、边框、边框颜色/不透明度、填充颜色/不透明度、透明度、可维护性、构建形状的时间量) ...)

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

双弧形 的相关文章

  • 是否可以使用 jQuery UI 限制 selectmenu 小部件的高度?

    我一直在尝试通过设置来做到这一点size来源的属性select元素 但它被忽略了 小部件似乎没有任何高度设置选项 是否可以 该小部件当前在隐藏了溢出的 div 对话框内工作 因此下拉列表 始终为 26 个项目 会从 div 中消失 一些CS
  • 如何更改 Material UI 版本 5 自动完成中的选项字体大小?

    我想更改下拉项目的字体大小 我尝试了不同的方法来改变字体大小 如下所示 如何更改 Material UI 自动完成字体大小 https stackoverflow com questions 62492939 how do i change
  • SVG 元素出现在 DOM 中但在屏幕上不可见

    我尝试使用 SVG 绘制五线谱Vexflow http www vexflow com and 拉斐尔 js http raphaeljs com当我加载页面时 SVG 元素出现在 DOM 中 但它们不会出现在屏幕上 我检查了是否有任何 C
  • a:active 不起作用

    我在这里很困惑 the a active不工作 但是 hover工作正常 我已经尝试了很多事情 但这个让我陷入困境 而且真的很令人困惑 我刚刚在表中添加了链接 我已将单元格添加到了类中 menu1 现在 当我访问活动页面时 活动链接不会突出
  • For 循环不适用于 JavaScript 动画

    我正在尝试编写一个 for 循环 以在单击形状按钮时重复 爆炸 路径的动画 但 for 循环无法工作 执行 而且我看不出哪里出了问题 for循环的目的 循环动画路径的过程 然后将动画反转回其原始路径 我知道问题出在 for 循环中的某个地方
  • 如何隐藏其他选项卡的内容并仅显示所选选项卡的内容

    当我单击特定选项卡时 其他选项卡的内容应该隐藏 但它并没有隐藏 这是我所有的代码 function showStuff id if document getElementById id style display block documen
  • 多列定义列表[重复]

    这个问题在这里已经有答案了 我有一个 dl 像这样 dl dt Quantity dd dt Size dd dt Rise dd dt Color dd dd dt dd dt dd dt dd dt dl 该列表是通过 php 动态生成
  • 为什么 Flexbox 会拉伸我的图像而不是保留纵横比?

    Flexbox 具有这种行为 它将图像拉伸到其自然高度 换句话说 如果我有一个带有子图像的 Flexbox 容器 并且我调整了该图像的宽度 则高度根本不会调整大小 并且图像会被拉伸 div display flex flex wrap wr
  • stripe checkout css内容策略错误

    我正在尝试创建一种形式条纹结账 https stripe com docs checkout在我的 Ionic 应用程序中 我创建了一个指令 将表单植入到我的内容视图中 但是当我运行它时 CSS 因违反内容策略而失败 checkout js
  • 单击按钮重复动画

    我想每次单击按钮时都重复动画 我尝试做某事像这样 https jsfiddle net 91raod7e const dist document querySelector dist document querySelector butto
  • 渲染时 Flutter SVG 延迟

    我在行中显示 SVG 文件形式的图像和文本 由于某些原因 svg 图像的渲染速度比屏幕的其余部分慢 从而导致延迟 这不利于用户体验 这种延迟正常吗 我该怎么做才能使整个屏幕同时渲染 Row mainAxisAlignment MainAxi
  • javascript中怪异模式的元素宽度?

    我一直在浏览所有流行的 js 库 但我找不到一个具有 DOM 元素宽度函数的库 该函数实际上可以解释 Internet Explorer 中的怪异模式 问题是 当启用怪异模式时 填充和边框不会计入宽度 据我所知 当省略 doctype 或将
  • 您能否确定 CSS 文件的范围,使其仅适用于给定元素的后代?

    给定一个 css 文件 有没有办法限制整个文件的范围 使其仅适用于给定元素内的元素 例如给定 div span class some element span div 有没有一种方法可以将整个 css 文件的范围应用于 容器 中的所有元素
  • 如何观察包含许多 sass 文件的整个目录/文件夹的变化

    我如何跟踪包含许多 sass 文件的整个目录的更改 我正在使用以下命令来观察 sass 的变化 file sass watch style scss style css 但是如何观察包含许多 sass 文件的整个目录 文件夹的变化 只需使用
  • 有 CSS 父选择器吗?

    我该如何选择 li 元素是锚元素的直接父元素 举个例子 我的 CSS 应该是这样的 li lt a active property value 显然 有多种方法可以使用 JavaScript 实现此目的 但我希望 CSS Level 2 本
  • 如何使用 css 在标题的两侧放置实线? [复制]

    这个问题在这里已经有答案了 可能的重复 如何在标题文本上制作字段集图例样式的 背景线 https stackoverflow com questions 5985009 how can i make a fieldset legend st
  • Menu.Item 中的 Antd 自动换行

    可以在 Menu Item 组件中应用自动换行吗 示例不起作用
  • div Hello div div Howdy dere pardner div div div 我明白它的作用 但为什么叫这个名字both 什么是both mean 两者的意思是 一组两件事中的每一项 左 和 右 两件事
  • IE bug:具有不透明背景色的绝对定位元素

    我有一个绝对定位的 DIV 需要捕获 onclick 事件 事实证明 在 IE7 中 DIV 似乎没有诸如单击甚至光标之类的 足迹 例如 div width 200px height 200px position absolute bord
  • 为什么我的图像下方有空间? [复制]

    这个问题在这里已经有答案了 图像在下面获得了神秘的空白空间 即使padding 0 margin 0被应用 示范 http jsfiddle net cLETP 红色边框应该包围图像 但底部有空间 造成这种情况的原因是什么 如何删除该空间

随机推荐