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;
}
相关推荐
我不吃饼干2 分钟前
从 Vue3 源码中了解你所不知道的 never
前端·typescript
开航母的李大16 分钟前
【中间件】Web服务、消息队列、缓存与微服务治理:Nginx、Kafka、Redis、Nacos 详解
前端·redis·nginx·缓存·微服务·kafka
Bruk.Liu16 分钟前
《Minio 分片上传实现(基于Spring Boot)》
前端·spring boot·minio
鱼樱前端43 分钟前
Vue3+d3-cloud+d3-scale+d3-scale-chromatic实现词云组件
前端·javascript·vue.js
zhangxingchao1 小时前
Flutter入门:Flutter开发必备Dart基础
前端
佚名猫1 小时前
vue3+vite+pnpm项目 使用monaco-editor常见问题
前端·vue3·vite·monacoeditor
满分观测网友z1 小时前
vue的<router-link>的to里面的query和params的区别
前端·javascript·vue.js
BillKu1 小时前
Vue3 + TypeSrcipt 防抖、防止重复点击实例
前端·javascript·vue.js
鱼樱前端1 小时前
Vue3结合three和babylonjs实现3D数字展厅效果
前端·vue.js
Themberfue1 小时前
Vue ⑥-路由
前端·javascript·vue.js