suibi
- linux开机自启动服务命令（运行自启动脚本命令）
- linux忘记密码进不去如何解决（centos忘记登录密码解决方案）
- css梯形圆角边框样式（css实现多边形图案）
- 超详细css样式代码大全（css常用代码整理版）
- mysql和oracle的语法区别有什么（oracle为什么比mysql快）
- python调试程序的方法（python调试运行语句）
- php和java哪个好用（2022年学php还是java好）
- mysql除法保留小数（mysql保留几位小数的4种方法）
- 3种js对象转数组的方法（js将对象转换成数组的简单方法）
- mysql如何创建数据库教程（建立数据库的步骤）
- linux修改文件名称命令（linux重命名文件名后缀）
- mysql函数有哪些及作用（常用的数据库函数总结）
- python中class类的定义及用法（深入解析py的class类）
- python文件重命名代码命令（python如何批量修改文件名）
- linux查看配置信息文件命令（linux如何查看主机配置）
- win10命令提示符怎么进入系统模式（管理员怎么运行命令提示符）
- php和python性能对比哪个更好（php网页编程可以做什么）
- cmd进入mysql命令行连接（windows进入数据库的方法）
- xshell连接linux服务器教程分享（xshell常用命令大全值得收藏）
- css三角形怎么写（实例演示css创建三角形实现代码）
- linux查看磁盘信息命令（如何查看磁盘使用情况）
- excel下拉框怎么编辑（如何编辑下拉框选项内容）
- excel基础操作知识总结（必备的excel知识点总结大全）
- excel快速选择区域的方法（超实用表格快速选中某个区域方法）
- excel常用快捷键命令大全表（239个最常用excel快捷键技巧）
- excel中常用的数据格式有哪些（基本数据类型你了解多少）
- excel打乱顺序排列方法（表格随机打乱顺序）
- 最简单的excel表格分列拆分快捷方式（表格拆分列和行方法）
- excel日期差值计算公式（跨天的时间差计算公式）
- 一分钟搞定excel下拉列表关联设置（表格下拉菜单自动关联操作方法）
- excel日期比较函数正确公式（如何用excel计算日期差）
- excel颠倒顺序怎么做（excel数据如何实现顺序反转）
- html定位的几种方式分别是什么（简述HTML的定位方式怎么用）
- jquery获取属性值方法详解（jquery获取元素的实现方法）
- jquery隐藏元素的方法（jquery实现元素显示和隐藏的方式）
- linux查看隐藏文件命令是什么（如何查看隐藏文件命令）
- css居中对齐的代码怎么设置（css网页居中对齐代码怎么写）
- Java中rpc框架有哪些功能介绍（常用rpc框架有哪些）
- 修改linux系统时间常见命令（centos修改系统时间脚本命令）
- ajax同步和异步的区别是什么（简述编程中同步和异步的区别）
css三角形怎么写（实例演示css创建三角形实现代码）
前端开发经常会遇到三角形的装饰，今天我们来用css实现。还是一样先上全代码，在逐步解析。
全代码展示
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <style> .title { position: relative; padding-left: 16px; } .title::before { content: ""; position: absolute; border-width: 8px; border-style: solid; border-color: transparent transparent transparent red; top: 50%; left: 0; margin-top: -8px; } </style> <body> <div class="title">css实现三角形</div> </body></html>效果展示
最终效果+元素查看
代码解析
1.用div写一个标题
<div class="title">css实现三角形</div>2.标题样式。
设置相对定位，并设置内边距，给三角形留下空间
.title { position: relative; padding-left: 16px; }3.三角形样式
这里用到了 ::before 伪类元素，简单解释下，他会在元素（本代码中为“title”）内容前插入新的内容（本代码content中的内容为空）。
重点：不设置元素的宽高，只设置4边的宽度和颜色结果如下图
给元素4边都设置颜色和宽度
// 4边都设置颜色 .title::before { content: ""; position: absolute; border-width: 8px; border-style: solid; border-color: blue green yellow red; top: 50%; left: 0; margin-top: -8px; }通过让其他3边颜色透明就能实现三角形效果，给需要显示的三角形的边线设置颜色。
（tip:三角形的总高是上下边线宽度之和，所以偏移一半高度居中）
// 只给左边设置颜色，其余三边线设置透明.title::before { content: ""; position: absolute; border-width: 8px; border-style: solid; border-color: transparent transparent transparent red; top: 50%; left: 0; margin-top: -8px; }
写笔记