当前位置: 首页 > news >正文

css绘制常见的一些图形

以下是在CSS中绘制常见图形的示例代码:

  1. 线条:
.line {width: 100px;height: 1px;background-color: black;
}

  1. 箭头:
.arrow {width: 0;height: 0;border-top: 10px solid transparent;border-bottom: 10px solid transparent;border-right: 10px solid black;
}

  1. 三角形:
.triangle {width: 0;height: 0;border-top: 50px solid transparent;border-left: 50px solid black;border-bottom: 50px solid transparent;
}

  1. 矩形:
.rectangle {width: 100px;height: 50px;background-color: black;
}

  1. 圆:
.circle {width: 50px;height: 50px;border-radius: 50%;background-color: black;
}

  1. 椭圆:
.ellipse {width: 100px;height: 50px;border-radius: 50%;background-color: black;
}

  1. 平行四边形:
.parallelogram {width: 100px;height: 50px;transform: skewX(20deg);background-color: black;
}

  1. 菱形:
.rhombus {width: 0;height: 0;border: 50px solid black;border-right-color: transparent;border-left-color: transparent;transform: rotate(45deg);
}

  1. 梯形:
.trapezoid {width: 100px;height: 0;border-top: 50px solid black;border-left: 25px solid transparent;border-right: 25px solid transparent;
}

http://www.lryc.cn/news/224611.html

相关文章:

  • 【网络协议】
  • 如何在JVS低代码表单配置中实现数据的高效管理?
  • 【Python大数据笔记_day04_Hadoop】
  • Android超简单的显示网络图片方法
  • 基于自然语言处理的结构化数据库问答机器人系统
  • JVM Native内存泄露的排查分析(64M 问题)
  • 智能网联汽车基础软件信息安全需求分析
  • 《QT从基础到进阶·十八》QT中的各种鼠标事件QEvent
  • CSDN中调整图片和文本样式
  • 社区团购商品数据抓取
  • Nginx用做sip代理
  • C# set的一些使用方法
  • 机器学习——回归
  • JAVA代码视频转GIF(亲测有效)
  • 挑战100天 AI In LeetCode Day03(热题+面试经典150题)
  • 【手写模拟Spring底层原理】
  • 代码随想录训练营Day1:二分查找与移除元素
  • 回归预测 | Matlab实现PCA-PLS主成分降维结合偏最小二乘回归预测
  • 高效的测试覆盖率:在更短的时间内最大化提高测试覆盖率
  • Qt 项目实战 | 音乐播放器
  • JavaScript使用Ajax
  • Python爬虫实战-批量爬取美女图片网下载图片
  • uniapp+uview2.0+vuex实现自定义tabbar组件
  • opencv 任意两点切割图像
  • rust变量绑定、拷贝、转移、引用
  • Java多种方式向图片添加自定义水印、图片转换及webp图片压缩
  • 基于Pytorch框架的LSTM算法(二)——多维度单步预测
  • cnn感受野计算方法
  • 百分点科技受邀参加“第五届治理现代化论坛”
  • 基于Springboot的智慧食堂设计与实现(有报告)。Javaee项目,springboot项目。