Html 使用CSS的计划图标

我正在尝试使用css创建如下图标。但是，这看起来很难

我试过了，但看起来不太好

.schedule{
高度：10px；
宽度：10px；
位置：相对位置；
}
.椭圆形{
高度：10px；
宽度：10px；
背景色：#FDD13A；
边界半径：50%；
}
.第{
框大小：边框框；
高度：5.97px；
宽度：4.08px；
边框：2个实心#FFFFFF；
位置：绝对位置；
顶部：1.5px；
左：4px；
}

---

如评论中所述，在这些情况下，如果您可以使用它，那么字体awesome始终是一种不错的方式。也就是说，如果你想自己动手做，你可以尝试以下方式：

正文{
背景：#4c；
}
.时间表{
边界半径：50%；
背景：橙色；
宽度：25px；
高度：25px；
位置：相对位置；
}
.line1，
.line2{
背景：#fff；
边界半径：5px；
位置：绝对位置；
高度：2倍；
宽度：10px；
}
.line1{
顶部：8px；
左：6px；
变换：旋转（90度）；
}
.line2{
顶部：15px；
左：9px；
变换：旋转（45度）；
}

使用来自的

时钟

。您只能下载所需的图标。在这种情况下，您只能下载

clock

——一个简单的svg文件

纯CSS3解决方案

不确定为什么只插入了一行带有

.oval

，但需要两行

只需使用

变换原点

和

旋转

旋转另一行即可

。已取消{
高度：10px；
宽度：10px；
位置：相对位置；
}
.椭圆形{
高度：20px；
宽度：20px；
背景色：#FDD13A；
填充：2px；
边界半径：50%；
}
.第1行{
高度：11px；
宽度：3倍；
背景：#FFFFFF；
保证金：0自动；
边界半径：3px3px0；
}
.第2行{
高度：10px；
宽度：3倍；
背景：#FFFFFF；
保证金：0自动；
变换原点：左上角；
变换：旋转（-70度）；
边界半径：0 0 3px 3px；
}

---

使用

变换和位置：绝对

做出响应

。已取消{
高度：20px；
宽度：20px；
位置：相对位置；
背景色：#FDD13A；
边界半径：50%；
}
.取消2{
高度：500px；
宽度：500px；
位置：相对位置；
背景色：#FDD13A；
边界半径：50%；
}
.line1{
位置：绝对位置；
宽度：10%；
身高：40%；
排名前10%；
左：45%；
背景：#ffffff；}
.line2{
位置：绝对位置；
宽度：10%；
身高：40%；
最高：50%；
左：45%；
背景：#ffffff；
变换：旋转（-45度）；
变换原点：左上角；
}

---

纯SVG。可扩展且被所有主流浏览器接受，无需下载库

背景
第一层

很长一段时间以来，它一直以这种方式添加图标、徽标和其他元素。如果我想添加另一个图标，我只需要将下一个符号添加到父元素。即使在旧的IE中也可以使用。为此，您可以根据需要更改颜色，更改大小而不降低质量，因为它是svg；）

.scheduled图标{
填充物：橙色；
}
.时钟指针{
冲程：#fff；
}

使用fontawesome我同意，如果你想要一些很酷的图标，就使用fontawesome吧，这是目前为止最适合这种类型的图标……而且非常容易使用。我认为没有必要使用这么多元素。仅使用圆和多段线：）@mahan只是概念证明。我不是SVG专家，根本没有反应能力。父元素的大小是固定的。@mahan只需更改父元素的大小，不需要更改其他元素的大小。。。