css实现三角形

1. Border

css 复制代码
<div class="triangle"></div>

                .triangle {
                    width: 0;
                    height: 0;
                    border-left: 50px solid transparent;
                    border-right: 50px solid transparent;
                    border-top: 14rpx solid red;
                }

2. transform

css 复制代码
.arrow {
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-right: 50px solid red;
  transform: rotate(45deg);
}

3. :before 和 :after 伪元素

css 复制代码
.arrow {
  position: relative;
}
.arrow:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-right: 50px solid red;
}

4. clip-path

css 复制代码
.arrow {
  width: 100px;
  height: 100px;
  background-color: red;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
相关推荐
teeeeeeemo14 小时前
Webpack 模块联邦(Module Federation)
开发语言·前端·javascript·笔记·webpack·node.js
岁月宁静15 小时前
AI聊天系统 实战:打造优雅的聊天记录复制与批量下载功能
前端·vue.js·人工智能
小小弯_Shelby15 小时前
uniApp App内嵌H5打开内部链接,返回手势(左滑右滑页面)会直接关闭H5项目
前端·uni-app
IT_陈寒15 小时前
SpringBoot性能飞跃:5个关键优化让你的应用吞吐量提升300%
前端·人工智能·后端
加洛斯16 小时前
Vue 知识篇(2):浅谈Vue中的DOM与VNode
前端·javascript·vue.js
kunge1v516 小时前
学习爬虫第三天:数据提取
前端·爬虫·python·学习
可爱的秋秋啊16 小时前
简单网站编写
开发语言·前端
Keepreal49616 小时前
Electron基本概念
前端·javascript·electron
zhaoolee17 小时前
Claude Code使用指北(如何白嫖百万Qwen3 Token,每月劲省20刀)
前端
前台端水工程师17 小时前
vite-plugin-mock插件的3.0.2版本在生产环境无法使用
前端