标签: css-shapes

在CSS Tricks上有很多不同的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>

它是如何以及为什么有效？

如何创建一个看起来像这样的菜单......

链接到PSD

我不想使用PSD图像.我更喜欢使用像FontAwesome这样的包中的图标,并在CSS中生成背景/ css.

可以在此处找到使用PSD生成工具提示的图像然后使用它的菜单的版本.

我想在这个图像中围绕一个圆圈中的数字:

这可能吗？它是如何实现的？

我想要一个有一个居中单词的网页.

我想用动画绘制这个单词,这样页面就会以与我们相同的方式"写出"单词,即它从一个点开始,随着时间的推移绘制直线和曲线,使得最终结果是一个字形.

我不在乎这是用<canvas>DOM还是DOM 完成的,我不关心它是用JavaScript还是CSS完成的.没有jQuery会很好,但不是必需的.

我怎样才能做到这一点？我没有运气就进行了详尽的搜索.

如何创建这样的形状以显示在网页上？

我不想使用图像,因为它们会在缩放时变得模糊

我试过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页面中使用？

这是CSS:

div {
    width: 0;
    height: 0;
    border: 180px solid red;
    border-radius: 180px;
}

它如何产生下面的圆圈？

假设,如果矩形宽度为180像素,高度为180像素,那么它将如下所示:

应用border-radius 30像素后,它将显示如下:

矩形变得越来越小,也就是说,如果半径大小增加,矩形几乎会消失.

那么,180像素的边框如何height/width-> 0px变成半径为180像素的圆？

我想知道是否有一种更简单的方法来创建循环div而不是我现在正在做的事情.

目前,我只是为每个不同的大小制作一个图像,但这样做很烦人.

无论如何使用CSS来制作圆形的div,我可以指定半径？

我在stackoverflow上找到了这个例子:

仅使用css绘制圆形

哪个好.但我想知道如何修改该示例,以便我可以在圆圈中间包含文本？

我也发现了这一点: 在CSS中以圆圈为中心的文本垂直和水平居中(如iphone通知徽章)

但由于某种原因,它不适合我.当我创建以下测试代码时:

<div class="badge">1</div>

而不是一个圆圈,我得到一个椭圆形状.我正在尝试使用代码来了解如何让它工作.

是否可以使用css绘制圆圈,这可以在大多数浏览器(IE,Mozilla,Safari)上使用？

是否可以控制CSS中虚线边框笔划之间的长度和距离？

以下示例在浏览器之间显示不同:

div {
  border: dashed 4px #000;
  padding: 20px;
  display: inline-block;
}

<div>I have a dashed border!</div>

差异很大:IE 11/Firefox/Chrome

有没有什么方法可以更好地控制虚线边框的外观？