css-shapes相关内容

css中的平行四边形

我想借助 css 中的平行四边形形状制作标题菜单背景.问题是我的标题菜单文本也以平行四边形样式显示.我希望我的文字样式为直线/法线. 这是我的 css 代码:- .nav-bg{背景色:rgba(2,2,2,0.9);向左飘浮;歪斜-webkit-transform: skew(-60deg);-moz-transform: skew(-60deg);-o-变换:倾斜(-60度);变换:倾 ..
发布时间:2021-09-23 20:20:11 其他开发

按钮的多边形边框/边框半径

我正在尝试制作如下图所示的多边形边框形状. 我试过的代码如下. @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');.p 按钮{背景:透明;文字装饰:无;背景:#5344c6;白颜色;填充:15px 50px;边界半径:27px;文本转换:大写;字体系列:“流行音乐";字母间距:0.5 ..
发布时间:2021-09-23 20:13:54 其他开发

如何在 CSS 中创建彼此相邻的多边形形状

我创建了一个多边形三角形,我想将它们并排堆叠 我使用了 shape-outside,但它似乎不起作用.我希望这是动态的,以便可以在无需更改代码的情况下添加更多内容 div:nth-child(odd) {宽度:280px;高度:280px;背景:#1e90ff;-webkit-clip-path: 多边形(50% 0%, 0% 100%, 100% 100%);显示:内联块;背景:ur ..
发布时间:2021-09-23 19:38:32 其他开发

右上角的四分之一圆

我希望制作一个四分之一圆以放置在我网站的右上角(固定),并且我希望它在用户滚动时朝着其中心设置动画(我有用于缩小元素的代码,但不适用于元素本身或其中心) 我使用以下代码缩小了标题: HTML(脚本) $(function(){无功收缩头 = 50;$(窗口).滚动(功能(){var scroll = getCurrentScroll();如果(滚动> =收缩标题){$('header ..
发布时间:2021-09-23 19:37:35 其他开发

如何创建一个不规则形状的div?

是否可以用CSS创建一个不规则形状的div?我已经搜索过,但我找不到一个很好的例子.风格是这样的: //\/\/\/___________________________\ 顶部应该有一条线连接它.基本上左右两边的高度不同. 解决方案 SVG 方式 由于您请求的形状仅用 CSS 无法实现,我建议您使用 SVG 绘制形状. 以下代码将创建以下形状: ..
发布时间:2021-09-23 19:25:55 其他开发

创建底部响应箭头

我需要创建带有向下箭头的网格.见下图: 问题是由于.col-xs-3,div 具有可变宽度.如何为箭头(:after 元素)提供适当的宽度,以便它仍然具有响应性? 我的 CSS: .grid-arrow::after {内容: " ";显示:块;宽度:0;高度:0;边框顶部:47px 实心透明;边框底部:47px 实心透明;左边框:40px 实心 rgb(173, 173, 173) ..
发布时间:2021-09-11 18:54:42 其他开发

夹角盒

我需要一个带有所有弯角的盒子.这是我到目前为止的内容: body {高度:200px;背景:-webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1));背景:-o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1));背景:-moz-linear-gradient(rig ..
发布时间:2021-04-27 19:33:21 其他开发

可能有多个多边形吗?

我正在尝试创建一个金字塔.我认为我会为此使用CSS clip-path .我打算做一个三角形(我设法做到了),并在它下面做了几个梯形(甚至第一个也失败了). .container {最小宽度:50%;最大宽度:50%;}.三角形 {背景颜色:黄色;剪切路径:多边形(90%100%,50%0%,10%100%);}.trapeze {背景颜色:蓝色;剪切路径:多边形(0%10%,0%90%, ..
发布时间:2021-04-27 19:33:18 其他开发

如何通过使用CSS将形状组合成一个云来创建云?

因此,我主要尝试使用div和CSS创建云.我很少有div形状为圆形或斑点的想法,其想法是将它们合并为一个,使它们看起来像云一样. .cloud-body {宽度:250像素;高度:200px;背景:线性渐变(蓝色,蓝紫色);左边距:30%;保证金最高:20%;边界半径:50%;}.blob1 {宽度:100px;高度:100px;背景:蓝色;边界半径:50%;位置:相对;底部:200px; ..
发布时间:2021-04-27 19:33:15 其他开发

如何在带有边框的CSS中制作可调整大小的心脏

我想制作一个可以由用户调整为任意宽度和高度并具有1 px边框的心形. 我尝试了用纯CSS制成的心脏: https://stackoverflow.com/a/17386187/1404447 我尝试使用一种字体,如下所示: https://www.w3schools.com/charsets/tryit.asp?deci = 9829& ent = hearts ,还尝试了SVG ..
发布时间:2021-04-27 19:33:12 其他开发

如何制作垂直椭圆形的div形状?

我想创建一个椭圆形的形状,如下图所示,但失败了 还有什么方法可以在此椭圆形的CSS内插入图像?这是我的主要目标. 我的演示 #oval {边距:0px 0 10 02px;背景:黑色;-moz-border-radius:100px/50px;-webkit-border-radius:100px/70px;border-radius:50px/50px;border-top- ..
发布时间:2021-04-27 19:33:06 其他开发

CSS-在div上切成全对角透明角

如何从div处切掉整个角,保持透明. 这是我尝试过的: .well-corner {最低高度:20像素;内边距:19px;底边距:20px;背景:rgba(8,12,23,0.8);-webkit-box-shadow:插入0 1px 1px rgba(0,0,0,0.05);box-shadow:嵌入0 1px 1px rgba(0,0,0,0.05);border-top-rig ..
发布时间:2021-04-27 19:32:58 其他开发

具有渐变背景的CSS渐变双箭头形状

我看到了以下问题和答案: CSS渐变带有内部阴影和渐变边框的箭头形状,我希望创建相同的东西,但每侧都有一个箭头. 最终结果将是这样: 三角形: div {职位:相对显示:inline-block;文本转换:大写;白颜色;高度:3em;最小宽度:10em;行高:3em;font-family:Arial;字号:1.5em;font-weight:粗体;文本对齐:居中;背景:线性渐 ..
发布时间:2021-04-27 19:32:55 其他开发

CSS-如何制作100vh的1/4圆?

我想要这样的东西(粉红色的圆圈): CSS四分之一圈100vh示例. 到目前为止,我有一个半圆(请参见下面的CSS),但是当我尝试将其设为100vh时,它会拉伸,并且我不知道如何保持其成比例. .circle {高度:180像素;宽度:90像素;border-radius:0 90px 90px 0;-moz-border-radius:0 90px 90px 0;-webkit-bor ..
发布时间:2021-04-26 20:32:55 其他开发

Bootstrap Jumbotron底部的CSS箭头

我正在尝试使用边框创建一个css形状,以在下面的图像中表示黑色形状.... 黑色形状将放置在Bootstrap巨型Botron内(或上方).红色区域是背景图片. ..
发布时间:2021-04-26 19:47:43 其他开发