CSS3 Border-radius创建一个蛋形
我正在使用CSS3建立随机形状.我被卡在这个蛋形上了.我检查了蛋形的数学原理，它由2个半径不同的圆组成.但是，我无法在此处将这种基本结构与CSS生成代码(尤其是“边界半径")关联起来.部分. #egg {显示:块;背景颜色:绿色；宽度:126px;/*宽度必须为高度的70％*//*可以使用width:70％;在方形容器中*/高度:180像素；/*注意Safari需要实际的px作为边界半径(错误
..
css-shapes相关内容
具有不透明度和渐变文本描边/轮廓的CSS渐变文本
尽管我发现类似的问题，没有一个明显符合我的目标. 我正在尝试显示具有渐变色，不透明性较低的文本(以便您可以通过它看到背景)，而且还具有(匹配的)实心渐变边框(即，文本笔触).我发现与相似的答案问题通过创建 :: before 参考底图状态来复制(渐变)边框效果，从而开发出一种解决方法，但是更改文本自然状态的不透明度只会显示的颜色:: before 加上底线文本，而不是背景色(所需的结果).
..
如何使用CSS创建多维数据集窗口?
..
如何仅使用CSS制作甜甜圈段
如何仅使用CSS制作此形状
..
如何在背景顶部创建曲线?
请帮助我从.top更改切口，使其位于顶部而不是右侧.如图中所示.提前非常感谢您.我真的希望有您的帮助，我是这个行业的新手.源代码:源代码
..
如何绘制梯形卡?
这是最终效果. 我尝试过，但是我不知道如何进行. 我希望能得到一些提示，以帮助我继续前进. 我现在添加了一些代码，使其看起来更像它.但是它看起来仍然有些不完美. 您可以在下面看到结果吗? 我花了很多div来组合它们，但是圆角看起来并不十分光滑 .block {职位:相对}.block-shapes {职位:相对显示:flex;}.block-shape {位置
..
如何在CSS形状中添加偏移轮廓?
在创建带有斜角边缘的块时，我会遇到一些问题，此外，我还需要对边框进行斜角处理并稍微偏离主块.问题在于，根据屏幕的不同，该块可能是响应式的. 我不知道确切的方法，希望每个人都能帮忙. 这就是我现在要做的 .box {显示:flex;内边距:20px;高度:200px；宽度:300像素；颜色:#ffffff;背景:红色；职位:相对}.box .edge {宽度:18px；高度:10
..
如何创建具有渐变的曲线?
我正在尝试在div的中间插入一条曲线，所以我可以实现以下结果: 这是我到目前为止所做的. .back {背景颜色:灰色；宽度:100％;高度:200px；显示:内联网格；align-items:居中;溢出:隐藏；}.线{高度:3px；背景:线性渐变(向右，黄色，紫色，蓝色，绿色，红色，橙色)；变换:rotate(-10deg);}
..
如何创建带有圆边的曲线?
嗨，我需要像这样创建一条线 解决方案 您可以添加两个背景层，以在边缘处创建圆形，如下所示: .line {--c:20px;/*控制大小*/宽度:100px；上边距:-100px;显示:行内块；box-sizing:border-box;边框:实心var(-c)透明;边界半径:50％；边框底部颜色:红色；背景:径向渐变(最远端，红色98％，透明)，左侧15％，底部14％，径向渐变(
..
如何使用CSS制作人字形箭头?
好的，所以每个人都知道您可以使用此三角形: #triangle {宽度:0;高度:0；左边框:50px纯透明；右边框:50px纯透明；边框底:100px纯红色；} 然后生成一个实心的实心三角形.但是，您将如何像这样制作一个空心箭头状的三角形?
..
CSS边框底部的曲线
使用SVG路径: 这也可以通过仅使用SVG path 而不是 clip-path 来实现.浏览器对此的支持比剪辑路径版本更好. .curved-border {职位:相对高度:200px；宽度:400像素；}svg {位置:绝对；高度:100％;宽度:100％;顶部:0px；左:0px；}svg路径{填写:url(#g-image);笔触:黑色；笔划宽度:4；}
..
使用CSS在文本中使用线性渐变边框的渐变颜色不起作用
我想使用下图设计£1 类似于下图. 我想在此设计中添加一些带有渐变颜色，渐变边框和文本阴影的文本.我尝试了以下代码，但不起作用. CSS: .pound-lbl { background-image: linear-gradient(275deg, #f8e71c 0%, #f8bd1c 100%); -webkit-background-clip:
..
形状外属性根本不起作用
我刚刚开始尝试使用CSS中的 shape-outside 属性，但是无论我浏览多少文档或博客，我都无法使其工作。我可能犯了一个愚蠢的错误，但我不确定。 有人可以指出错误吗？ #q {背景-color：＃E6C9C9; / *高度：100％；宽度：100％; * /浮点数：左！重要; -webkit-shape-outside：圆（50％）;形状外：circle（50％）;} <
..
带有CSS的箭头边框
我在photoshop上设计了一个新网站，当我开始编写导航代码时，我遇到了问题。按钮的外观如下： 但是我不知道如何编码，因此当我将鼠标悬停在按钮上时，它会显示这些行。我见过开发人员使用CSS创建复杂的形状，但是我不知道是否有可能做到这一点。 有办法吗？ 解决方案 这样的问题需要我们想像一下。要获得想要的效果，您只需为元素设置 border-left 和 border-right 文
..
如何实现纯CSS标志形状的容器？
我的目标是实现像这样的纯CSS标记形状的容器： 要求包括： 背景色未知 适用于不同的 line-height 和 font-size 设置 解决方案 选项1 使用 clip-path ，但请检查浏览器对此属性的支持： div {剪切路径：多边形（0％0％，100％0％，85％50％，100％100％，0％100％ ）;背景颜色：＃ff69b4; / *演示样式*
..
CSS中的圆形偏斜顶部形状
我需要制作一个如下所示的div： css中间带有文本。我尝试查看转换和其他3D内容，但无法弄清楚，尤其是在不破坏文本的情况下。 解决方案 您可以将偏斜的Y伪元素用作元素的背景。这不会影响内容： div {位置：相对；显示：inline-block;内边距：20px 50px;溢出：隐藏；} div：在{内容：’之前；位置：绝对；最高：0;左：0；宽度：100％;高度：100％
..
如何在CSS中创建带有角的div
我需要在div处创建带有2px边框宽度的带角的div（不是圆角）： 我需要纯CSS解决方案 .center-link {text-align：center;}。continue {text-decoration：none;边框：2px实线＃26368d； border-radius：10px;背景色：透明；保证金：0自动;填充：10px 10px 9px;字体家族：“ Raleway
..
带有边框和图像的六边形
对于六角形，我有以下代码。我需要在六边形周围有一个边框，并需要一个图像作为六边形的背景，而不是纯色。 body {背景：＃ecf0f1; }＃hex1 {宽度：200像素；高度：200像素；}＃color1 {背景色：＃D93;}。hexagon-wrapper {文本对齐：居中；边距：20px;职位：相对display：inline-block;}。hexagon {height：100
..
右梯形轮廓形状（透明）
我正在尝试模拟类似于 此图片 。 我的操作方式是使用两个梯形形状，并将一个与另一个形状重叠与 此jsFiddle 中的背景相同。 但是我意识到我希望形状的 rest 为透明，而不是要与其他对象重叠。 核心只是CSS的一部分，它是 rightTrapezoid div内的 outlineMaker div。 .rightTrapezoid { border-bottom：
..
具有内部阴影和渐变边框的CSS渐变箭头形状
我想从CSS创建一个带有渐变边框和1px内部阴影的渐变箭头形状按钮。 我已经创建了一个图像来显示按钮和样式规则： 这是我到目前为止所拥有的： .button {颜色：#FFF;背景颜色：＃D02180！important;背景：-webkit-gradient（linear，0 0，0 100％，from（＃f84aa4），to（＃d02181））;背景：-webkit-lin
..