css-shapes相关内容

带渐变的css三角形

我正在尝试实现一个用渐变填充的三角形。 三角形应位于页面的左上角,并拉伸50%的水平视区和120%的垂直视区。 我需要三角形有一个渐变穿过它。 我已经成功地完成了前三件事,但我无法使渐变起作用。 我试过用overflow和transform: rotate();用不同的方式定位伪元素,但我就是不能让它起作用。 以下是我到目前为止的JSfiddle: 数据-lang=“js”数据- ..
发布时间:2022-04-12 14:01:22 前端开发

边界圆看起来很模糊

这个带边框的圆圈看起来很模糊。是否有可能修复它以及如何修复它? div { border-radius: 50%; border: 1px solid black; height: 22px; width: 22px; background-color: white; } 推荐答案 使用带有透明边框的框阴影似乎也会使它在使用铬 ..
发布时间:2022-03-26 19:40:38 前端开发

如何在边界侧创建带有链接的圆圈

我正在尝试制作一个像 this 这样的圈子.我能够做到这一点,但问题是我需要每个橙色边都是一个链接,我不能用边框来做.如果有人可以帮助我,我将不胜感激. #circle {宽度:200px;高度:200px;边界半径:50%;背景:绿色;}#incircle {宽度:100px;高度:100px;边界半径:50%;边框:50px 点缀橙色;} ..
发布时间:2022-01-30 18:02:54 前端开发

侧面倾斜的形状(响应式)

我正在尝试创建一个如下图所示的形状,仅在一侧具有倾斜边缘(例如,底侧),而其他边缘保持笔直. 我尝试使用边框方法(代码如下),但我的形状尺寸是动态的,因此我无法使用此方法. .shape {位置:相对;高度:100px;宽度:200px;背景:番茄;}.shape:{之后位置:绝对;内容: '';高度:0px;宽度:0px;左:0px;底部:-100px;边框宽度:50px 100px ..
发布时间:2022-01-30 13:38:30 前端开发

两个 div 用对角线分割 - CSS

我试图让两个 div 适合页面的整个宽度,但用对角线分成两半. 如何通过 CSS 使用两个 div 来实现这一点?这是一个滑块,完成后需要将内容添加到每个部分 解决方案 可以是这样的 示例 1 div {最小高度:100px;背景:#D25A1E;位置:相对;宽度:计算(50% - 30px);}.div1 {向左飘浮;}.div2 {浮动:对;}.div1:之后,.di ..
发布时间:2022-01-24 16:59:37 前端开发

创建具有 24 点或以上点阵的“新"尖刺标签

我正在尝试制作一个点爆点,如下图所示: 目前,我已尝试使用伪元素进行此操作,但是,我只能生成 12 点连拍,并不能反映图像中显示的内容. 有没有办法用几个元素来创建一个点阵? 以下是我用来尝试此解决方案的代码: div{宽度:100 像素;高度:100px;背景:灰色;变换:旋转(45度);边距:50px;}div:之后{位置:绝对;内容:"";背景:灰色;宽度:100 像 ..
发布时间:2022-01-17 11:14:52 前端开发

如何用 CSS 绘制一个不完整的圆圈以及如何在其中放置图片?

如何使用 CSS 和图像创建一个带有切口的圆圈?我想要的示例如下所示.需要一个跨浏览器解决方案,并且使用 css 而不是 html. 解决方案 您可以通过使用伪元素创建圆然后使用 overflow: hidden 倾斜容器来做到这一点. 子伪元素被反向倾斜,使其看起来好像根本没有倾斜. .shape {位置:相对;高度:100px;宽度:120px;溢出:隐藏;-webkit ..
发布时间:2022-01-14 15:42:45 前端开发

如何制作边缘平滑的 CSS 三角形?

我有一个使用这个 CSS 的三角形 (JSFiddle): .triangle {宽度:0;高度:0;边界顶部:0;边框底部:30px 实心 #666699;左边框:20px 纯透明;border-right: 20px 纯透明;} 还有这个 HTML: 这会形成一个三角形,但对角线是锯齿状和像素化的.我怎样才能使它们光滑?(我能够 ..
发布时间:2022-01-14 15:37:50 前端开发

如何仅使用 CSS 创建一个圆形或方形 - 中心是空心的?

它应该基本上是正方形或圆形的轮廓 - 我可以相应地设置样式(即,将颜色更改为我想要的任何颜色,更改边框的粗细等) 我想将那个圆形或正方形应用到其他东西(如图像或其他东西)上,中间部分应该被挖空,这样您就可以看到正方形或圆形下方的图像. 我希望它主要是 CSS + HTML. 解决方案 试试这个 div.circle {-moz-border-radius:50px/50p ..
发布时间:2022-01-14 15:37:30 前端开发

盒子内 CSS 中的三角形

嗯,我不知道如何正确解释.在这里,检查此屏幕截图,其中包含我想要制作的内容.我的设计师给了我这个.如果我找不到解决方案,我将使用图像而不使用代码.可以用 CSS3 做到这一点吗? 这里是图片 看到那个盒子里面的三角形了吗?我想做这个.谢谢! 解决方案 创造性地使用边框来实现这个效果,在下面的示例中没有图像受到伤害,您甚至可以在元素本身上设置箭头的位置 - 变成如果您可以为您的设 ..
发布时间:2022-01-14 15:23:53 前端开发

在 CSS 中以圆形垂直和水平居中文本(如 iphone 通知徽章)

我正在寻找一种在 CSS3 中制作类似 iphone 的跨浏览器徽章的方法.我显然想为此使用一个 div,但替代解决方案会很好.重要的因素是它需要在所有浏览器中水平和垂直居中. 关于这些通知的一个有趣的设计问题是它们不能具有指定的宽度(高度是固定的)——它们应该能够处理 [在 ascii 绘图中] (1) 和 (1000),其中 (1000) 不是完美的圆形,但看起来更像是一个胶囊. ..
发布时间:2022-01-14 15:12:09 前端开发

创建圆形 div 比使用图像更简单的方法?

我想知道是否有比我现在做的更简单的方法来创建圆形 div. 目前,我只是为每种不同尺寸制作一张图片,但这样做很烦人. 有没有使用 CSS 来制作圆形的 div 并且我可以指定半径? 解决方案 这是一个演示:http:///jsfiddle.net/thirtydot/JJytE/1170/ CSS: .circleBase {边界半径:50%;行为:网址(PIE.htc ..
发布时间:2022-01-14 15:02:19 前端开发

如何在html页面中画圆圈?

如何使用 HTML5 和 CSS3 绘制圆? 里面也可以放文字吗? 解决方案 你不能画圆本身.但你可以制作与圆形相同的东西. 您必须创建一个圆角矩形(通过 border-radius),该矩形是您要制作的圆的 宽度/高度的一半. #circle {宽度:50px;高度:50px;-webkit-border-radius:25px;-moz-边界半径:25px;边框半径 ..
发布时间:2022-01-14 15:01:18 前端开发

如何创建 Facebook 状态箭头文本框?

我怎样才能得到一个弯曲的文本框,比如 Facebook 状态文本框,只有 html 和 css? 谁能告诉我怎么做?? 解决方案 我的跨浏览器,Facebook 样式文本框的纯 CSS 版本: 如何 我在内部容器 div 上使用了 :before(具有 7px 折叠边框,三个透明,一个白色)创建一个三角形,其中边框相交,然后我将它放在具有绝对定位的文本框(覆盖文本框的边框 ..
发布时间:2022-01-13 11:39:56 前端开发

CSS 径向菜单

我想做的事: 我想创建一个如下所示的径向菜单,考虑到图片中的所有交互元素,即中心的图像以及它周围的四个区域.解决方案跨浏览器兼容很重要.这只是一个简单的例子,因为零件不一定是四分之一,它们可以是任意数量的零件: 目前尝试过的解决方案: 我尝试过使用带有边框的 CSS3 圆形 div,边框以这些图像作为背景,但效果不佳,因为每个元素都必须是独立元素. 我听说过 css-sha ..
发布时间:2022-01-10 18:07:07 前端开发

背景中的 CSS 3 或 svg 波浪

如何在透明图像背景上构建波浪? 布局-图像: 我需要白顶背景中的波浪. 解决方案 我稍微改进了akshay的答案版本.这包括两个单独的选项. 选项 1 如果不必保留纵横比,则曲线将随宽度而变化. http://jsfiddle.net/f6n73avk/2/ 选项 2 如果必须保留纵横比,那么我们必须为 svg 元素的高度和宽度使用相同的单位值. ..
发布时间:2022-01-08 13:31:47 前端开发