标签[css-shapes]

CSS形状是通过使用级联样式表将HTML元素转换为形状和图像而制成的。 最基本的形状包括三角形,正方形和圆形,但可以制成更高级的形状,例如心形,八边形和星形。

-2
0回复
21

边界半径与剪切路径

我已经看到一些开发人员使用border-radius来制作圆形的border-radius: 50%; 而另一些人则使用clip-path: circle(50% at 50% 50%); 。
1
3回复
57

使用CSS形状:如何使用纯HTML和CSS制作自定义图标

目前,我正在使用HTML和CSS,我想从该图像制作一个图标 图像有点像那样。 我尝试在较大的圆圈内添加不同形状的椭圆和圆圈,但是没有用。 对于阴影部分,我在设计样式时使用了盒子阴影。
1
4回复
97

如何在CSS中创建此形状(带有圆角的四边形)?

我正在React Js中构建一个小部件,在设计中,此图像位于背景中。 我的问题是背景颜色是动态的,宽度和高度可能会根据设备而变化。 我尝试使用内联SVG(我可以通过这种方式来控制填充
-2
1回复
25

如何使用CSS创建和排列此类形状?

需要一些帮助来阐明如何创建响应形状并将其居中而不使用附件中的Bootstrap或Grid? (每个三角形分成2个不同颜色的部分,)感谢您的帮助, 在此处输入图片说明
2
1回复
47

在CSS中绘制半圆形状

我正在尝试复制形状 当我在CSS中使用圆形时,看起来有些不同: .shape{ display: inline-block; text-align: center; l
0
3回复
79

如何实现弯曲的顶部指针

谁能帮忙吗? 如何仅使用CSS(没有图像)实现附加的按钮? 到目前为止,这是我的代码: .triangle-up { width: 0; height: 0; bor
1
2回复
124

如何在将CSS形状浮动到一边的同时使文本与底部对齐,从而使文本自动换行?

我在<div>内的<p>内有一些文本。 我有一个浮动到一侧的css图像形状 。 我希望两个上方的框中的文字换成形状,但也要与div的底部对齐。 两个下部的框工作正常,
1
1回复
26

使用线性梯度和径向梯度混合

当我将鼠标悬停在图像上时,尝试使用线性渐变和径向渐变为背景生成形状。 我希望鼠标悬停时显示以下形状(灰色的不透明度为0.8): 我写了下面的CSS,显示了线条,但是我不知道如何使
5
2回复
108

创建三角形菜单

我正在尝试创建一个菜单,其中包含一起形成一个正方形的直角三角形。 这是我的构想: 这是我希望实现的目标: 可以通过javascript动态生成。 缩放到父级 裁
5
1回复
60

CSS:按钮上有多个箭头

我想要在右边创建一个带有多个箭头的按钮,如下所示: 这就是我所做的: https : //jsfiddle.net/aqjfLy7s/ 。 我无法弄清楚如何让第一个箭头与按钮边框齐平
3
2回复
79

如何用css创建“梨状”形状

我想用css创建这个形状。 我尝试过使用border-radius,但我不能完全像上面那样。 这是我最接近边界半径属性小提琴 .mybox { backgroun
1
1回复
35

是否可以仅使用一个div在一个CSS局部中创建2个不同的形状? [重复]

这个问题已经在这里有了答案: 为什么:before和:after伪元素需要'content'属性? 4个答案 我正在尝试将冰淇淋蛋卷创建为CSS中的单个div绘图,
4
2回复
82

如何使用HTML和CSS创建自定义形状

我在div中创建了一个半自定义形状,如下所示 .myDiv { border-bottom: 300px solid #FFC20F; border-right: 150px so
2
4回复
81

背景 - 单斜条纹

我需要有CSS的背景作为附加的图像我无法使用线性渐变。 我尝试使用以下内容,但我无法创建1个白色条纹。 div { background: #5cbcb0; backg
8
4回复
130

带有镶嵌边框的CSS圆圈

我正在尝试使用嵌入边框在CSS中创建一个圆圈,如下例所示: 我有以下HTML和CSS,但它没有产生我需要的效果: .inlay-circle { width: 15re
0
1回复
67

内部弯曲的透明形状,两侧圆角div

我正在尝试创建内部弯曲的透明形状 但是我在创建这种弯曲形状时遇到了麻烦,这就是我所做的` body { background-color: #00a4ffb3; } .pa
3
2回复
116

使用CSS抓取样式形状? [关闭]

已关闭 。 这个问题需要更加集中 。 它当前不接受答案。
3
2回复
52

试图创建这个CSS功能区。 挣扎着色带的曲线

我试图使用边框半径创建这个css形状(功能区),但我无法这样做,我能够获得的曲线与图像中的div曲线不完全匹配。 如果我得到正确的曲线来解决问题,我想尽可能避免使用svgs。
1
1回复
39

如何在CSS中制作椭圆形形状

我正在尝试使用CSS类来制作这种灰色形状。 我以为使用border-raduis会有效。 形状接近但仍处于关闭状态。 我目前有这个: 这是我正在使用的CSS:
3
2回复
61

额外的普通丝带css

有没有人有这样的东西? 在这里我尝试使用box-shadow,但结果与图像不相似。 谢谢。 .ribbon{ width: 30px; height: 60px; bac

1 2 3 4 5 6 7 8 9 10 下一页