css实现的垃圾桶图标

简介: css实现的垃圾桶图标

<div class="trash icon"></div>
.trash.icon {
  color: #000;
  position: absolute;
  margin-left: 5px;
  margin-top: 7px;
  width: 9px;
  height: 10px;
  border-left: solid 1px currentColor;
  border-right: solid 1px currentColor;
  border-bottom: solid 1px currentColor;
  border-radius: 0 0 2px 2px
}
.trash.icon:after {
  content: '';
  position: absolute;
  left: 0px;
  top: -5px;
  width: 7px;
  height: 2px;
  border-left: solid 1px currentColor;
  border-right: solid 1px currentColor;
  border-top: solid 1px currentColor;
  border-radius: 4px 4px 0 0;
}

目录
相关文章
|
1天前
|
编解码 前端开发 UED
【专栏:HTML 与 CSS 实践篇】网页图标与字体图标的使用
【4月更文挑战第30天】本文探讨了网页设计中两种主要图标形式——传统图标和字体图标。传统图标(PNG, JPEG, GIF)视觉效果丰富但文件大,易影响加载速度且维护不便。字体图标占用空间小,易于维护和定制,但视觉效果相对简单,选择有限。实际应用中,两者可结合使用,以导航栏、操作按钮和提示信息为例说明了图标的重要性。设计师需注意兼容性、清晰度和性能优化问题,根据项目需求选择合适图标类型,以提升网页质量和用户体验。
|
4月前
|
前端开发
若依框架----图标(可能不全)css
若依框架----图标(可能不全)css
90 0
|
9月前
|
前端开发
纯css实现的搜索图标(1)
纯css实现的搜索图标(1)
134 0
|
5月前
|
前端开发
CSS改变图标颜色(filter一行代码解决hover变换颜色问题)
CSS改变图标颜色(filter一行代码解决hover变换颜色问题)
52 0
|
9月前
|
前端开发
css 实现svg动态图标效果
css 实现svg动态图标效果
141 0
|
9月前
|
前端开发
css 实现svg动态图标效果
css 实现svg动态图标效果
126 0
|
9月前
|
前端开发
【CSS动画05--闪亮的玻璃图标悬浮效果】
【CSS动画05--闪亮的玻璃图标悬浮效果】
|
9月前
|
前端开发
css实现的心形图标
css实现的心形图标
99 0
|
9月前
|
前端开发
css实现的错号图标(3)
css实现的错号图标(3)
104 0
|
10月前
|
前端开发 数据可视化
漏刻有时数据大屏CSS样式表成长教程(3):使用样式表做圆环指示图标
漏刻有时数据大屏CSS样式表成长教程(3):使用样式表做圆环指示图标
197 2