创建一个圆形的箭头
我正在尝试制作如下所示的箭头： 但是，这是我能找到的最接近的> .button {margin：4em 0;填充：2em;宽度：15％;保证金：0自动;文本对齐：居中；背景颜色：＃000000;颜色：#ffffff;显示：-moz-box;显示：-ms-flexbox;显示：-webkit-flex;显示：flex; -moz-flex-flow：行换行； -webkit-flex-
..
css-shapes相关内容
CSS3线性渐变以循环方式
我想知道是否可以使用css渐变做类似的事情： 我搜索了很多，所有的渐变都是“线性”或“径向”。我想要的渐变是圆形的！ 解决方案 恐怕CSS不允许线性径向渐变。但是，svg提供了解决方案，尽管很粗糙。有关解决方案，请参见以下主题。 在圆形笔划上svg多种颜色
..
CSS3菜单边框-RightArrow效果
我想使用css3实现向右箭头效果，我已经尝试了很多次，但是没有运气。 http://jsfiddle.net/ffCDw/ .menu li { list-style-type：none; display：inline; } .menu li a { padding：0 20px; 背景：绿色； 颜色：#fff; } 解决方案 我遇到了同样的问
..
带有边框的一侧偏斜背景图像
我正在尝试倾斜具有边框的一侧的背景图像。 我基本上试图创建的布局如下： 这是我制作的一个快速JSFiddle当前设置： https：// jsfiddle.net/silvawebdesigns/b2ae0k69/11/ ＃about-gallery {边距：60px 0;显示：-ms-flex;显示：-webkit-flex;显示：flex; flex-wrap：包装;底
..
CSS响应三角宽度
真的是一个简单的问题，我想知道如何使三角形的宽度（使用下面的代码在css中制成）等于页面宽度，因此当浏览器调整大小时，三角形也是如此。 到目前为止，我的代码 .triangle { 颜色：深红色 宽度：0； 高度：0； 最高保证金：30％； border-top：100像素深红色； border-left：100px纯透明； border-right：100px纯透明
..
CSS“反向边界半径”外部元素的边框创建手机缺口设计
我正在尝试使用HTML和CSS创建看起来像手机的东西，并且希望相机具有类似“倒置边框半径”的功能，以使其与框架平滑连接。 我不能只是将其放大并用白色背景的伪元素遮盖不需要的区域，因为屏幕内容可能并不总是白色。 此外，我不能在同一元素上使用 mask-image ，因为“倒置的半径”实际上会超出边界框，所以我实际上会增加面积而不是减去面积（加上支撑确实很低）。 如果可能的话，我想避
..
如何在CSS中实现响应式功能区形状？
尝试使用CSS实现此目的。 我已经做到了，但是如果我的标签（CAREER）的长度大于 div 的大小，这就会中断。如果更长，则内容会自动换行，并且 div 的高度会增加。但是左侧的色带切割并不能快速响应。有人可以提出更好的方法吗？ .custom-tag-container {border ：1px实心;保证金：自动；显示：flex; align-items：拉伸；边框颜色：绿色绿色绿色
..
带衬里的自定义CSS角
我知道可以像这样拐角： .left-corner {宽度：0;高度：0；边框顶部：100px固体粉蓝色;左边框：100px纯透明；}
是否可以使用元素之外的多种颜色的CSS制作转角。 像这样吗？ 解决方案 如果您希望它看起来像您发布的图像，则可以使用peusdo元
..
带有聊天框的三角形框
我想用CSS制作一个矩形框，后跟一个小三角形，例如此。我已经完成了，但是我想要带有“：after”的输出。我已经尝试过，但是我什么也不能打印。 p {display：inline-block; padding：5px 6px 8px 6px; border-radius：6px;浮动：正确；右边距：40px;颜色：黑色；背景颜色：＃146f79;}跨度{位置：绝对； margin-top：
..
仅使用HTML和CSS的弯曲帆形状？
是否可以仅使用HTML和CSS在下面创建弯帆形状？ 我可以从这个答案，我可以使用以下方式创建直帆： #triangle { width：0; 高度：0； border-right：50px纯透明； border-bottom：100px纯红色； } 如下所示： 或者我可以 #sail { 背景：＃ff0000; 宽
..
带圆角的CSS曲线
嗨，我需要像这样的图像创建一行 但我不知道如何结束圆角线边缘 .line { 位置：绝对； 宽度：55像素； 高度：10像素； 边框：实心12.5px #fff; border-color：白色透明透明透明； border-radius：50％/ 100％100％0 0; transform：rotation（180deg）; margin-left：10px;
..
使用CSS在矩形上盘旋
我想设计一个类似于以下图像的形状（圆形和矩形之间的效果）： 我知道圆形是使用 border-radius 设计的，而类似矩形的形状是使用一些具有样式显示的无序列表设计的：阻止。但是我不明白如何将圆保持在矩形上，以致看起来矩形的某些部分被圆切割成圆形（圆形和矩形之间的白色空间）。 我尝试过阴影，轮廓，溢出等操作，但是它不起作用。 谁能告诉我如何设计一个形状像图像一样？ -谢谢
..
倾斜的div顶部和底部CSS
我正在尝试使以下div倾斜。我几乎达到了下面的形状，但是底部没有像我下面的形状那样朝正确的方向倾斜。我该如何纠正？ 形状已附加 http://jsfiddle.net//fgdcq3qp/ CSS 。倾斜{{ 背景：红色； box-sizing：边框框； 高度：40vh； 宽度：100％； 职位：相对； padding：20px; } .slante
..
创建CSS半圆
我有一个实心圆圈，其中包含这样的数字： 如何将其分成两个半圆，这样我可以在其中存储两个不同的数字，就像这样： 我的CSS如下： .oval { display：inline-block; 宽度：75像素； 高度：75像素； 边界半径：50％； 背景：＃000000； 颜色：白色； 行高：75px； font-size：中; } 解决方案 您可
..
如何使用CSS在两个圆之间画一条水平线？
如何在CSS的2个圆之间绘制一条水平线？ 它必须位于屏幕截图的中间。 此处的示例： 我绘制了两个圆圈，但不要 ＃status-buttons { ： 黑色;显示：inline-block;字号：17px； font-weight：正常；右边距：0；文本对齐：居中；文本转换：大写；最小宽度：150像素；文本装饰：无；}＃状态按钮a：悬停{文本装饰：无；}＃状态按钮a。活动跨度
..
是否可以制作一个“双箭头”？ CSS3内容技术？
我正在寻找一种仅使用CSS重新创建此按钮的方法。 我了解三角形技术，也知道如何为其添加边框，但是不幸的是，我不知道有什么方法可以重新创建此按钮（无需添加其他包装或使用图像）。 我需要此样式的按钮是 和普通的 。 解决方案 使用一个元素，您可以使用渐变并歪曲了链接的伪元素： demo （您实际上可以只使用渐变来完成此操作
..
带CSS的方括号
我希望仅使用CSS创建一个 [和] 括号。有没有一种方法可以指定顶部和底部边框（不对图像进行切片），使其看起来像是括号？ .bracket { border-top：20px; border-bottom：20px; border-right：none; border-left：1像素纯黑色； } 解决方案 .b：之后{内容：”]“}。b：之前{
..
从两边的HTML / CSS将两列文字围绕图像/形状包装
我正在尝试将文本包装在从两侧使用的图像周围，如下所示： ： 这是html。
就像驾驶一辆全新的豪华车或设备齐全的SUV一样，尤其是免费的感觉！那就对了！作为B-Epic补偿计划的一部分，我们奖励品牌合作伙伴的一种很棒的方法
..
在CSS中画一个X
我有一个看起来像橙色正方形的div 我想以某种方式在此div中绘制白色X，以便使其看起来更像 无论如何在CSS中执行此操作，还是仅在Photoshop中进行绘制并将图像用作div背景会更容易吗？ div代码就像 div { height：100px; 宽度：100像素； background-color：＃FA6900; border-radius：5px; }
..
如何创建纯CSS 3维球体？
tl; dr： 我想用CSS创建一个实际的3d球面-不仅仅是一种幻觉 使用纯CSS，您可以像这样创建和设置动画 3d立方体： ＃cube-wrapper {位置：绝对；左：50％；最高：50％；透视图：1500px;}。cube {位置：相对；转换样式：reserve-3d; animation-name：旋转；动画时间：30秒；动画定时功能：线性；动画迭代次数：无限；} @关键帧旋转
..