css画三角形

使用border

js 复制代码
div {
  border-top: 50px solid yellowgreen;
  border-bottom: 50px solid deeppink;
  border-left: 50px solid bisque;
  border-right: 50px solid chocolate;
}

如果想要单个的三角形,把其它三边的颜色设为transparent即可

使用 conic-gradient 绘制三角形

js 复制代码
div {
  background: conic-gradient(from 90deg at 50% 0, deeppink 0, deeppink 45deg, transparent 45.1deg);
}

使用 clip-path 绘制三角形

js 复制代码
div {
  background: deeppink;
  clip-path: polygon(0 0, 100% 0, 0 100%, 0 0);
}
相关推荐
万邦科技Lafite1 小时前
京东按图搜索京东商品(拍立淘) API (.jd.item_search_img)快速抓取数据
开发语言·前端·数据库·python·电商开放平台·京东开放平台
Never_Satisfied3 小时前
在JavaScript / Node.js / 抖音小游戏中,使用tt.request通信
开发语言·javascript·node.js
一只小透明啊啊啊啊4 小时前
Java Web 开发的核心组件:Servlet, JSP,Filter,Listener
java·前端·servlet
你的人类朋友5 小时前
设计模式有哪几类?
前端·后端·设计模式
Yeats_Liao5 小时前
Go Web 编程快速入门 10 - 数据库集成与ORM:连接池、查询优化与事务管理
前端·数据库·后端·golang
啃火龙果的兔子5 小时前
前端八股文react篇
前端·react.js·前端框架
打小就很皮...5 小时前
React 实现 i18next 中英文切换集成
前端·react.js·i18next
拉不动的猪5 小时前
函数组件和异步组件
前端·javascript·面试
淮北4946 小时前
html + css +js
开发语言·前端·javascript·css·html
你的人类朋友6 小时前
适配器模式:适配就完事了bro!
前端·后端·设计模式