双弧形

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(使用前将#替换为@)

双弧形 的相关文章

  • ABSMIDDLE 在 Firefox 和 Chrome 上的工作方式不同吗?

    我有一个图标图像和文本 如下所示 一切的代码来源是 img src align left My Title Here 问题在于 与 Firefox 相比 Chrome 中的图标没有与标题垂直对齐 我觉得absmiddle根本不起作用 有什么
  • 使用 css 将 div 框置于页面中间居中

    我想将 div 放在页面中间居中 我尝试过top 30 但是当窗口大小调整偏离对齐方式时 div div 谢谢 让 如果您知道该 div 的高度 宽度 例如 它将是 100px X 200px 那么您可以这样做 cent position
  • 如何设置 div 高度来填充可用空间

    我有一个 3 列布局 列下方有一些详细信息 您会注意到其中一列的高度大于其他列的高度 我希望其他两个 div 自动填充剩余空间 直到蓝色 div 文本将动态加载 因此我需要它与任何更大的列 并且任意数量 一起使用 这可以通过 HTML CS
  • CSS 中 media="screen" 是什么意思?

    下面的 CSS 代码中 media screen 是什么意思
  • 使用多个相互矛盾的 css 文件时的优先顺序

    当在同一页面上使用多个 css 文件并且它们发生冲突时 我如何知道将使用哪一个 例如 如果一个说蓝色主体背景 另一个说红色 快速回答 如果两段 CSS 具有相同的特异性 http web archive org web 2016021005
  • 严格的 DocType 在 FF/Chrome 中强制规定最小表格行高

    我以前从未注意到的事情 但似乎在 Chrome Firefox 可能还有 Opera Safari 我没有专门检查这些 中 使用严格的文档类型可以防止表行显示小于我无法显示的值来确定计算 以下文档在 IE7 中的显示方式与人们想象的一样 所
  • 背景 CSS 图像仅在 IE7 中不显示

    html 是 div class choose os p a href someLink class windows Microsoft Windows a a href someOtherLink class macos Apple Ma
  • 无法删除重叠的框阴影

    更具体地说 我使用的是聚合物纸影 我正在尝试删除一个的两侧paper shadowbox 来创建一个简单的箭头框 但我似乎无法摆脱它 我试过删除position absolute 但这似乎并没有消除重叠的行为 这是我的 html css 的
  • For 循环不适用于 JavaScript 动画

    我正在尝试编写一个 for 循环 以在单击形状按钮时重复 爆炸 路径的动画 但 for 循环无法工作 执行 而且我看不出哪里出了问题 for循环的目的 循环动画路径的过程 然后将动画反转回其原始路径 我知道问题出在 for 循环中的某个地方
  • jquery覆盖加载栏div

    所以我有一个数据表 并且我正在使用 ajax 获取数据 当检索数据时 表中的数据消失并出现一个小的加载圆圈 我希望数据保留 我知道如何做到这一点 并且加载圆圈出现在表格的中心 不一定是垂直的 至少是水平的 以及稍微透明的背景阻挡稍微超出表格
  • 设置overflow-y可见,而overflow-x为auto,以便内容可以垂直溢出父容器

    我在用着position absolute and position relative如果将其父级悬停在图像上 则在图像上显示文本 文本和图像父 div 所在的容器设置为overflow x auto 使其具有水平滚动条 我想要看起来垂直溢
  • 单击按钮重复动画

    我想每次单击按钮时都重复动画 我尝试做某事像这样 https jsfiddle net 91raod7e const dist document querySelector dist document querySelector butto
  • :hover 状态在 iOS 上不会结束

    我有一个带有悬停状态的简单菜单
  • 您能否确定 CSS 文件的范围,使其仅适用于给定元素的后代?

    给定一个 css 文件 有没有办法限制整个文件的范围 使其仅适用于给定元素内的元素 例如给定 div span class some element span div 有没有一种方法可以将整个 css 文件的范围应用于 容器 中的所有元素
  • 有 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
  • 如何仅使用CSS设置某个角的边框半径

    如上所示 我可以只给顶部部分而不给底部提供半径 或者有时给底部而不是顶部提供半径吗 有没有办法只给一个角提供边界半径 Like border radius top left top right bottom right bottom lef
  • Menu.Item 中的 Antd 自动换行

    可以在 Menu Item 组件中应用自动换行吗 示例不起作用
  • 删除

    好的 我有一个小菜单栏 菜单内的三个元素还有更多的子菜单 但是菜单栏中的元素之间有不必要的间距 而且我创建的子菜单有不必要的背景宽度 我在代码中将其涂成白色以使读者理解 由于这种不必要的宽度 即使鼠标悬停在不可见的宽度上 在本例中为白色 本
  • 从顶部开始在同一水平线上显示同一行中的两个 div

    这是我的代码 floating box display inline block width 150px margin 10px border 3px solid 73AD21 after box border 3px solid red

随机推荐