css绘制常见的一些图形

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

  1. 线条:
css 复制代码
.line {
  width: 100px;
  height: 1px;
  background-color: black;
}
  1. 箭头:
css 复制代码
.arrow {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid black;
}
  1. 三角形:
css 复制代码
.triangle {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-left: 50px solid black;
  border-bottom: 50px solid transparent;
}
  1. 矩形:
css 复制代码
.rectangle {
  width: 100px;
  height: 50px;
  background-color: black;
}
  1. 圆:
css 复制代码
.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: black;
}
  1. 椭圆:
css 复制代码
.ellipse {
  width: 100px;
  height: 50px;
  border-radius: 50%;
  background-color: black;
}
  1. 平行四边形:
css 复制代码
.parallelogram {
  width: 100px;
  height: 50px;
  transform: skewX(20deg);
  background-color: black;
}
  1. 菱形:
css 复制代码
.rhombus {
  width: 0;
  height: 0;
  border: 50px solid black;
  border-right-color: transparent;
  border-left-color: transparent;
  transform: rotate(45deg);
}
  1. 梯形:
css 复制代码
.trapezoid {
  width: 100px;
  height: 0;
  border-top: 50px solid black;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
}
相关推荐
white-persist5 分钟前
Python实例方法与Python类的构造方法全解析
开发语言·前端·python·原型模式
新中地GIS开发老师43 分钟前
Cesium 军事标绘入门:用 Cesium-Plot-JS 快速实现标绘功能
前端·javascript·arcgis·cesium·gis开发·地理信息科学
Superxpang1 小时前
前端性能优化
前端·javascript·vue.js·性能优化
Rysxt_1 小时前
Element Plus 入门教程:从零开始构建 Vue 3 界面
前端·javascript·vue.js
隐含1 小时前
对于el-table中自定义表头中添加el-popover会弹出两个的解决方案,分别针对固定列和非固定列来隐藏最后一个浮框。
前端·javascript·vue.js
大鱼前端1 小时前
Turbopack vs Webpack vs Vite:前端构建工具三分天下,谁将胜出?
前端·webpack·turbopack
你的人类朋友1 小时前
先用js快速开发,后续引入ts是否是一个好的实践?
前端·javascript·后端
知识分享小能手1 小时前
微信小程序入门学习教程,从入门到精通,微信小程序核心 API 详解与案例(13)
前端·javascript·学习·react.js·微信小程序·小程序·vue
子兮曰2 小时前
npm workspace 深度解析:与 pnpm workspace 和 Lerna 的全面对比
前端·javascript·npm