Questions tagged «css-shapes»

Наэтотвопросестьответына 堆栈溢出нарусском：КаксоздатьтреугольникиCSS？ CSS技巧中有许多不同的CSS形状-CSS的形状，我尤其对三角形感到困惑： #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } <div id="triangle-up"></div> 运行代码段隐藏结果展开摘要 它如何以及为什么起作用？

1846 css  geometry  polygon  css-shapes 

我如何创建看起来像这样的菜单... 链接到PSD 我不想使用PSD图像。我更喜欢使用诸如FontAwesome之类的软件包中的图标，并在CSS中生成背景/ css。 在此处可以找到使用PSD生成工具提示的图像然后使用它的菜单版本。

321 css  tooltip  css-shapes 

我想将一个数字围绕在这张图片中： 这可能吗，如何实现？

250 html  css  css-shapes 

我想要一个包含一个中心词的网页。 我希望用动画来绘制该单词，以便页面以与我们相同的方式“写”出该单词，即，它从一个点开始并随时间绘制线条和曲线，从而最终结果是一个字形。 我不在乎这是使用<canvas>DOM还是DOM 完成，也不关心它是使用JavaScript还是CSS完成的。缺少jQuery会很好，但不是必需的。 我怎样才能做到这一点？我进行了详尽的搜索，没有运气。

229 javascript  css  canvas  html5-canvas  css-shapes 

如何创建这样的形状以显示在网页上？ 我不想使用图像，因为它们在缩放时会变得模糊 我尝试过CSS： .tear { display: inline-block; transform: rotate(-30deg); border: 5px solid green; width: 50px; height: 100px; border-top-left-radius: 50%; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; } <div class="tear"> </div> 运行代码段隐藏结果展开摘要 事实证明真是搞砸了。 然后我尝试使用SVG： <svg viewBox="0 100 100"> <polygon points="50,0 100,70 50,100 0,70"/> </svg> 运行代码段隐藏结果展开摘要 它确实得到了形状，但底部没有弯曲。 有没有一种方法可以创建此形状，以便可以在HTML页面中使用它？

222 html  css  svg  css-shapes 

这是CSS： div { width: 0; height: 0; border: 180px solid red; border-radius: 180px; } 它如何产生下面的圆圈？ 假设，如果矩形的宽度为180像素，高度为180像素，那么它将显示为： 应用边界半径30像素后，将显示如下： 矩形变得越来越小，也就是说，如果半径大小增加，矩形几乎会消失。 那么，如何将180像素的边界height/width-> 0px变成半径为180像素的圆？

206 html  css  css-shapes 

我想知道是否有比我现在更简单的创建循环div的方法。 目前，我只是为每种不同的尺寸制作图像，但是这样做很烦人。 无论如何，有没有使用CSS制作圆形的div，我可以指定半径吗？

183 html  css  geometry  css-shapes 

我在stackoverflow上找到了以下示例： 单独使用CSS绘制圆 太好了 但是我想知道如何修改该示例，以便可以在圆圈中间添加文本？ 我还发现了这一点： 在CSS中以圆形为中心垂直和水平居中放置文本（例如iPhone通知徽章） 但由于某种原因，它对我不起作用。当我创建以下测试代码时： <div class="badge">1</div> 而不是圆形，而是椭圆形。我正在尝试使用代码，以查看如何使它工作。

156 css  css-shapes 

CSS中虚线边框之间的长度和距离是否可以控制？ 下面的示例在不同的浏览器中显示不同： div { border: dashed 4px #000; padding: 20px; display: inline-block; } <div>I have a dashed border!</div> 运行代码段隐藏结果展开摘要 较大的不同：IE 11 / Firefox / Chrome 是否有任何方法可以更好地控制虚线边框的外观？

124 css  border  css-shapes 

如果我使用像素或em值作为边界半径，则即使该值大于元素的最大边，其边缘半径也始终是圆弧或药丸形状。 当我使用百分比时，边缘半径为椭圆形，开始于元素各边的中间，从而形成椭圆形或椭圆形： 边框半径的像素值： 显示代码段 div { background: teal; border-radius: 999px; width: 230px; height: 100px; padding: 40px 10px; box-sizing: border-box; font-family: courier; color: #fff; } <div>border-radius:999px;</div> 运行代码段隐藏结果展开摘要 边界半径的百分比值： 显示代码段 div { background: teal; border-radius: 50%; width: 230px; height: 100px; padding:40px 10px; box-sizing:border-box; font-family:courier; color:#fff; } <div>border-radius:50%;</div> 运行代码段隐藏结果展开摘要 为什么以百分比表示的边框半径与以像素或em值设置的边框半径不一样？

124 css  css-shapes 

如何使用HTML5和CSS3画圆？ 也可以在其中放入文字吗？

116 html  css  geometry  css-shapes 

尝试对我的CSS三角形（边框）使用自定义的十六进制颜色。但是，由于它使用边框属性，因此我不确定如何执行此操作。我仅出于兼容性考虑而避免使用javascript和css3。我正在尝试使三角形的背景为白色，且边框为1px（围绕三角形的成角边），颜色为＃CAD5E0。这可能吗？这是我到目前为止的内容： .container { margin-left: 15px; width: 200px; background: #FFFFFF; border: 1px solid #CAD5E0; padding: 4px; position: relative; min-height: 200px; } .container:after { content: ''; display: block; position: absolute; top: 10px; left: 100%; width: 0; height: 0; border-color: transparent transparent transparent #CAD5E0; border-style: solid; border-width: 10px; }​ 我的小提琴：http : //jsfiddle.net/4ZeCz/

114 css  border  css-shapes 

关闭。此问题不符合堆栈溢出准则。它当前不接受答案。 想改善这个问题吗？更新问题，使其成为Stack Overflow 的主题。 5年前关闭。 改善这个问题 我已经搜索了该网站以找到进度条，但是我能够找到的进度条显示的动画圈子达到了全部100％。 我希望它停止在特定的百分比，如下面的屏幕截图所示。我有什么办法可以仅使用CSS来做到这一点？

112 html  css  progress-bar  progress  css-shapes 

好的，所以每个人都知道您可以使用此三角形： #triangle { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } 然后产生一个实心的三角形。但是，您将如何像这样制作一个空心箭头状的三角形？

102 html  css  css-shapes 

有什么方法可以使用CSS 从背景效果中切出一个透明文本，如下图所示？ 这将是可悲的输，因为替换文本图像的所有珍贵的SEO。 我首先想到了阴影，但是我什么也搞不清... 图片是网站背景，是绝对定位的<img>标签

90 css  svg  fonts  css-shapes