程序员经验分享-hwhale

带切边、边框和透明背景的 Div

2024-05-08

我一直在试图弄清楚如何在 CSS 中制作一个视觉上看起来像这样的自定义形状：

拥有以下财产background:rgba(44, 44, 48, 0.9) and border:6px solid rgba(29, 30, 35, 0.9);

我的问题是我找不到一种方法使右上角和左下边框看起来像我提供的图像。尝试了 CSS-Tricks 上的 CSS 自定义形状的提示，但它似乎没有解决问题，因为它不能有背景。有任何想法吗？


如果您以 3D 方式思考，您可以使用perspective and rotateX()属性仅改变元素的一个或两个角度。

这将允许您设置容器的伪元素的样式，以赋予它们所需的形状并剪掉右上角和左下角。

您还可以为形状提供所需的边框，输出：

Demo :

div {
  position: relative;
  width: 50%;
  height: 300px;
  margin: 10% auto;
  background: rgba(0, 0, 0, 0.7);
  border-top: 6px solid rgba(0, 0, 0, 0.8);
  border-bottom: 6px solid rgba(0, 0, 0, 0.8);
}
div:before,
div:after {
  content: '';
  position: absolute;
  top: -6px;
  width: 20%;
  height: 100%;
}
div:before {
  right: 100%;
  background: inherit;
  border-top: 6px solid rgba(0, 0, 0, 0.8);
  border-left: 6px solid rgba(0, 0, 0, 0.8);
  border-bottom: 6px solid rgba(0, 0, 0, 0.8);
  transform-origin: 100% 0;
  transform: perspective(1px) rotateY(-0.15deg);
}
div:after {
  left: 100%;
  border-top: 6px solid rgba(0, 0, 0, 0.8);
  border-right: 6px solid rgba(0, 0, 0, 0.8);
  border-bottom: 6px solid rgba(0, 0, 0, 0.8);
  border-left: none;
  background: inherit;
  transform-origin: 0 100%;
  transform: perspective(1px) rotateY(0.15deg);
}
<div></div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css

cssshapes

带切边、边框和透明背景的 Div 的相关文章

  • 这个 CSS 选择器是什么？ [类* =“跨度”]

    我在 Twitter Bootstrap 中看到了这个选择器 show grid class span background color eee text align center border radius 3px min height

  • 交替 div 使图像向左（偶数）或向右（奇数）

    我正在尝试更好地排列图像 而不仅仅是一列中的图像 请参阅附件中的示例 每篇文章的图像可以位于左侧和右侧 这是我的代码 HTML section class content list page section

  • 如何实现右边缘倾斜的 div？ [复制]

    这个问题在这里已经有答案了 我几天来一直在寻找使 div 的右边缘倾斜 45 度的代码 这是我特别想要得到的图像示例 似乎有很多 倾斜边缘 div 的示例 但我找不到任何具有特定右侧倾斜的示例 我花了很多时间试图改变其他人的代码 但结果却一

  • Firefox 忽略背景大小的 css

    尝试使用背景大小 CSS 规则缩小图像 但 Firefox 3 5 似乎会忽略该规则 CSS privatejoker background aqua url styles images home privatejoker png no r

  • 显示带有背景颜色的百分比条

    例如 如果我有一个包含两列和 2 行的表 Col1 Percentage 50 50 70 70 如何用代表 COl1 值的颜色填充百分比列 像这样的东西 您可以使用具有两个紧接着的停止点的线性渐变 percentageFill heigh

  • 在 IE10 中禁用捏合放大

    在 IE10 触摸模式下 我希望仅使页面的特定部分可缩放 其余的不应该 我找到了这个 http msdn microsoft com en US library ie hh772044 aspx http msdn microsoft co

  • 单击输入字段会触发窗口调整大小

    我有一个带有徽标 菜单和搜索的标题 当我在桌面上时 我会按该顺序显示所有元素 但如果我的窗口宽度小于 980 像素 菜单会隐藏 有一个切换按钮 并且徽标会与nav并附在徽标之后 如果宽度更大 则徽标将再次分离并附加到 DOM 中的旧位置 w

  • 如何在 div 容器内的元素之间留出空间

    我有一个弹性容器 它将由元素动态填充 容器没有固定宽度 I use max width max content 并且可以包含我想要的任意数量的元素 问题是我需要这些元素之间的间距 但不需要元素和容器之间左侧和右侧的间距 当然我可以用 ele

  • 有没有办法在 html 图像标签中显示位图数据？ [复制]

    这个问题在这里已经有答案了 有没有办法在 HTML 元素中显示位图图像数据 例如 您有一个指向源文件的常规图像 如下所示 img src myImage png width 100 height 100 有没有这样的事情 img width

  • 由于固定导航，增加了 FancyBox v2 的顶部和底部边距

    我目前正在开发一个网站 该网站将来将具有响应能力 该网站主要由图像组成 单击这些图像会加载到 FancyBox 中 FancyBox v2 现在具有响应能力 因此可以在屏幕尺寸发生变化时重新调整图像等的大小 作为我设计的一部分 我有两个固定

  • 为开槽元素中的后代元素设置样式

    是否可以选择开槽元素中的后代元素 像这样的例子 slotted div p color blue div p test p div 这不起作用 不 您只能选择顶级节点 slotted slotted 中的选择器只能是复合选择器 https

  • 两个 Div 之间的固定宽度间隙

    有谁知道如何修复两个 div 之间的间隙 我有一个主要内容 Div 里面有两个带有图片的 Div 视图的宽度为 768 像素 当我开始拉伸视图时 两张图片开始相互远离 但理想情况下 主要内容 Div 应该在周围有空白的情况下拉伸 并且图片之

  • CSS3 box-shadow 用于类似重叠的 div

    我正在尝试用css3来实现这种效果 HTML 代码显然是这样的

  • IE7 显示问题：菜单中的表格

    我写了一个菜单样式 在 IE8 FF3 6 GC7 中运行良好 现在的问题是 我的老板希望它甚至可以在 IE7 上运行 我真的很努力地让它在 IE7 上运行 但无法获得相同的外观 menu css a outline none menu m

  • 每 3 秒重复一次动画

    我正在使用 WOW js 和 animate css 现在我正在将 CSS 运行到 Infinite 我想知道如何让我的课程运行 3 秒停止并再次开始到无限 My html img src images fork png class for

  • 如何更改bootstrap中form-control弹出窗口中必填字段的默认消息？

  • 保持未知数量的 div 居中，每行最多 4 个

    我有一个简单的问题 但我自己无法解决 简而言之 有一个未知电话我必须在页面中放置的元素数量 最多 每行 4 个元素 但仍居中 此图片给您一个提示 我为了示例而设置它 详细 在上图中我涵盖了不同的场景 例如 如果总共有 5 个元素 则应使用第

  • 如何阻止破折号自行包裹？

    我有一个标题 标题最后一个单词的末尾是一个破折号 单词和破折号之间没有空格 当浏览器窗口变小时 破折号会中断并换成新行 在自己的行上有一个破折号是不好的排版 如何停止破折号之前的换行 以便最后一个单词运行到新行 这是代码 h1 XYZ co

  • 如何仅在最后一个
  • 处给出透明六边形角度？

    • 我必须制作这样的菜单 替代文本 http shup com Shup 330421 1104422739 My Desktop png http shup com Shup 330421 1104422739 My Desktop png

  • 为什么元素上的负底部边距会降低该元素父元素的高度？

    这可能是由于边距折叠造成的 我知道边距折叠 至少知道它如何影响相邻元素 但我不明白当涉及负边距时它如何在嵌套元素上工作 例如 在此标记和随附的 CSS 中 Markup div class parent div class child Ch

随机推荐

热门标签