六边形响应网格
我从互联网在我的网站上加载了多张图片.是否可以在响应式网格中为所有这些图像提供六边形?
... 我找到了多种方法来执行此操作，但您需要在 CSS 代码中填写图像 src.这对我来说是不可能的，因为网站使用 jQuery 从互联网上随机加载图片，所以我不能使用背景图片.
..
css-shapes相关内容
使用 CSS 将 div 的底部弯曲到内部
我想用 CSS 弯曲这个矩形 div/background 的底部，所以结果是这样的: 有人知道如何实现吗? .curved {边距:0 自动；高度:400px；背景:浅蓝色；边界半径:0 0 200px 200px;}
解决方案 简单地使用 border-radius 并依靠一些溢出.你也可以考虑使用伪元素来避免额外的标记
..
如何仅显示角边框?
我想知道是否可以在 CSS 中制作边框但仅限于角落.像这样: **** ***** ** *内容* ** ***** **** 解决方案 假设
CONTENT 和 CONTENT至少包含一个 HTML 节点. #content {position:relative}#content:before, #content:after, #conte
..
以百分比 (%) 和像素 (px) 或 em 表示的边框半径
如果我使用像素或em值作为边界半径，边缘半径总是圆弧或丸形甚至如果该值大于元素的最大边. 当我使用百分比时，边缘半径是椭圆形的，从元素每一边的中间开始，导致椭圆形或椭圆形: border-radius 的像素值: div {背景:青色；边界半径:999px；宽度:230px；高度:100px；填充:40px 10px；box-sizing: 边框框；字体系列:快递；颜色:#fff
..
从背景中切出的透明文本
有什么方法可以使用 CSS 制作从背景中切出的透明文本效果，如下图所示? 由于图像替换文本而失去所有宝贵的 SEO 将是可悲的. 我首先想到了阴影，但我什么也想不通...... 图片为网站背景，绝对定位标签 解决方案 css3 可以，但不是所有浏览器都支持 带背景剪辑:文本；您可以为文本使用背景，但您必须将其与页面背景对齐 body {背景:url(http://
..
图像标题前后的行
我想在居中标题前后创建一条行.线条和文本必须具有透明背景，以便能够将它们放置在不均匀的背景上.该行不能为 100% 宽度，如下所示: 标题文字可以更改: 标题的宽度未知 标题可以跨越多行 h1 {文本对齐:居中；边框底部:1px 实心 #000；} 今天 解决方案 你可以在标题的两边做一个线，带有 2 个伪元素和边框: 这适用于透明背景(线条和标题具有透明背景)
..
带箭头的气泡
我有一个项目需要插入气泡/消息框.我想要达到的一般形状是这样的: .bubble {高度:100px；宽度:200px；边框:3px纯灰色；背景:浅灰色；位置:相对；游标:指针；}.三角形 {宽度:0；边框顶部:20px纯黑色；border-left:20px 实心透明；border-right: 20px 实心透明；游标:指针；} 语音气泡
这目前没
..
CSS 三角形是如何工作的?
CSS Tricks - Shapes of CSS 上有很多不同的 CSS 形状以及我对三角形特别困惑: #triangle-up {宽度:0；高度:0；左边框:50px 实心透明；border-right: 50px 实心透明；边框底部:100px 纯红色；}
它如何以及为什么起作用? 解决方案 CSS 三角形:五幕悲
..
从 div 中切出的透明半圆
我想只使用 CSS3 制作一个透明的半圆形.唯一的要求是所有元素形成形状必须是黑色或透明的. 我不能使用带有白色圆圈的黑色矩形，因为半圆形必须是透明的，并让背景显示出来. 想要的形状: 解决方案 也许可以用 CSS :after 伪属性来做到: body {背景:绿色；}.rect {高度:100px；宽度:100px；背景:rgba(0, 0, 0, 0.5);位置:相
..
使用 CSS 切角
我想“剪切"一个 div 的左上角，就像你把页面的一角向下折叠一样. 我想用纯 CSS 来做，有什么方法吗? 解决方案 如果父元素有纯色背景，可以使用伪元素来创建效果: div {高度:300px；背景:红色；位置:相对；}div:之前{内容: '';位置:绝对；顶部:0；右:0；边框顶部:80px 纯白色；左边框:80px 纯红色；宽度:0；}
h
..
元素不会保持居中，尤其是在调整屏幕大小时
我的问题是我无法将三角形指针水平居中. 好吧，我可以针对某些窗口大小将指针居中，但是当我缩小或扩展窗口时，它又将其置于错误的位置. 我错过了什么? body {背景:#333333；}.容器 {宽度:98%；高度:80px；行高:80px；位置:相对；顶部:20px；最小宽度:250px；边距顶部:50px；}.container-decor {边框:4px 实心 #C2E1F5
..
斜边的形状(响应式)
我正在尝试创建一个如下图所示的形状，其中只有一侧有倾斜的边缘(例如，底侧)，而其他边缘保持平直. 我尝试使用边框方法(下面给出了代码)，但我的形状的尺寸是动态的，因此我不能使用这种方法. .shape {位置:相对；高度:100px；宽度:200px；背景:番茄；}.shape:after {位置:绝对；内容: '';高度:0px；宽度:0px；左:0px；底部:-100px；边框宽度
..
使表格单元格成为正方形
如何在不使用固定大小的情况下确保表格的每个单元格都变成正方形?并且在更改宽度时响应. table {宽度:90%；}TD{宽度:30%；}tr{/** 这里应该放什么?**/} 1 2 3
4 5 6
7 8
..
方形 DIV，其中高度等于视口
我需要创建一个 DIV，其中 width=height 和 height=100% 视口(显然，这是可变的). 换句话说，一个完美的方形 DIV，它根据视口的高度计算其尺寸.该 DIV 中的元素将采用它们的尺寸作为父 DIV 高度的百分比.宽度. 在我看来，在 CSS 中应该很容易做到这一点，但我已经被它卡住了！任何指针将不胜感激. 解决方案 您可以使用 jquery(或纯 j
..
css中的平行四边形
我想借助 css 中的平行四边形形状制作标题菜单背景.问题是我的标题菜单文本也以平行四边形样式显示.我希望我的文字样式为直线/法线. 这是我的 css 代码:- .nav-bg{背景色:rgba(2,2,2,0.9);向左飘浮;歪斜-webkit-transform: skew(-60deg);-moz-transform: skew(-60deg);-o-变换:倾斜(-60度)；变换:倾
..
按钮的多边形边框/边框半径
我正在尝试制作如下图所示的多边形边框形状. 我试过的代码如下. @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');.p 按钮{背景:透明；文字装饰:无；背景:#5344c6；白颜色;填充:15px 50px；边界半径:27px；文本转换:大写；字体系列:“流行音乐"；字母间距:0.5
..
如何在 CSS 中创建彼此相邻的多边形形状
我创建了一个多边形三角形，我想将它们并排堆叠 我使用了 shape-outside，但它似乎不起作用.我希望这是动态的，以便可以在无需更改代码的情况下添加更多内容 div:nth-child(odd) {宽度:280px；高度:280px；背景:#1e90ff；-webkit-clip-path: 多边形(50% 0%, 0% 100%, 100% 100%);显示:内联块；背景:ur
..
右上角的四分之一圆
我希望制作一个四分之一圆以放置在我网站的右上角(固定)，并且我希望它在用户滚动时朝着其中心设置动画(我有用于缩小元素的代码，但不适用于元素本身或其中心) 我使用以下代码缩小了标题: HTML(脚本) $(function(){无功收缩头 = 50;$(窗口).滚动(功能(){var scroll = getCurrentScroll();如果(滚动> =收缩标题){$('header
..
如何创建一个不规则形状的div?
是否可以用CSS创建一个不规则形状的div?我已经搜索过，但我找不到一个很好的例子.风格是这样的: //\/\/\/___________________________\ 顶部应该有一条线连接它.基本上左右两边的高度不同. 解决方案 SVG 方式 由于您请求的形状仅用 CSS 无法实现，我建议您使用 SVG 绘制形状. 以下代码将创建以下形状:
..
创建底部响应箭头
我需要创建带有向下箭头的网格.见下图: 问题是由于.col-xs-3，div 具有可变宽度.如何为箭头(:after 元素)提供适当的宽度，以便它仍然具有响应性? 我的 CSS: .grid-arrow::after {内容: " ";显示:块；宽度:0；高度:0；边框顶部:47px 实心透明；边框底部:47px 实心透明；左边框:40px 实心 rgb(173, 173, 173)
..