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;
}
相关推荐
周全全5 分钟前
基于 Vue 和 Spring Boot 实现滑块验证码的机器验证
前端·vue.js·spring boot
汪子熙20 分钟前
走进 Fundamental NGX Platform:从 SAP 设计体系到高生产力组件层
前端·javascript·面试
拉不动的猪33 分钟前
单点登录全流程小姐
前端·javascript·面试
菜鸟小九41 分钟前
html、css(javaweb第一天)
前端·css·html
y东施效颦1 小时前
uni-app页面发布测试环境出现连接服务器超时,点击屏幕重试解决方案
前端·javascript·vue.js·uni-app·vue
大熊程序猿1 小时前
《开篇:课程目录》
前端·c#
摸鱼仙人~2 小时前
React中子传父组件通信操作指南
前端·javascript·react.js
程序员阿超的博客2 小时前
React事件处理:如何给按钮绑定onClick点击事件?
前端·javascript·react.js
沉香亭北2 小时前
vue+vite 全局主题
前端
郑州小张2 小时前
前端解析PDF文件目录以及点击目录实现对应内容预览
前端·javascript