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;
}
相关推荐
Asthenia04124 分钟前
Netty编解码器详解与实战
前端
袁煦丞9 分钟前
每天省2小时!这个网盘神器让我告别云存储混乱(附内网穿透神操作)
前端·程序员·远程工作
一个专注写代码的程序媛1 小时前
vue组件间通信
前端·javascript·vue.js
一笑code1 小时前
美团社招一面
前端·javascript·vue.js
懒懒是个程序员2 小时前
layui时间范围
前端·javascript·layui
NoneCoder2 小时前
HTML响应式网页设计与跨平台适配
前端·html
凯哥19702 小时前
在 Uni-app 做的后台中使用 Howler.js 实现强大的音频播放功能
前端
烛阴2 小时前
面试必考!一招教你区分JavaScript静态函数和普通函数,快收藏!
前端·javascript
GetcharZp2 小时前
xterm.js 终端神器到底有多强?用了才知道!
前端·后端·go
JiangJiang2 小时前
🚀 React 弹窗还能这样写?手撸一个高质量 Modal 玩起来!
前端·javascript·react.js