CSS 样式清单整理:css 绘制三角形

  • css 绘制三角形
bash 复制代码
div {
    width: 0;
    height: 0;
    border-width: 0 40px 40px;
    border-style: solid;
    border-color: transparent transparent red;
}
  • 实现带边框的三角形
bash 复制代码
<div id="blue"><div>

#blue {
    position:relative;
    width: 0;
    height: 0;
    border-width: 0 40px 40px;
    border-style: solid;
    border-color: transparent transparent blue;
}
#blue:after {
    content: "";
    position: absolute;
    top: 1px;
    left: -38px;
    border-width: 0 38px 38px;
    border-style: solid;
    border-color: transparent transparent yellow;
}

注: 如果想绘制右直角三角,则将左 border 设置为 0;如果想绘制左直角三角,将右 border 设置为 0 即可(其它情况同理)。

相关推荐
sorryhc6 分钟前
【AI解读源码系列】ant design mobile——Avatar头像
前端·javascript·react.js
Mintopia15 分钟前
🎭 一场浏览器里的文艺复兴
前端·javascript·aigc
Mintopia15 分钟前
🎬《Next 全栈 CRUD 的百老汇》
前端·后端·next.js
AryaNimbus30 分钟前
你不知道的Cursor系列:如何使用Cursor同时开发多项目?
前端·ai编程·cursor
国家不保护废物34 分钟前
Function Call与MCP:给AI插上连接现实的翅膀
前端·aigc·openai
500佰34 分钟前
阿里Qoder AI 新开发工具,长期记忆、Wiki和Quest模式是它的独有特性
前端
Juchecar35 分钟前
Vue3 Class 和 Style 绑定详解
前端·vue.js
coding随想36 分钟前
揭秘DOM键盘事件:从基础到高级技巧全解析!
前端
xianxin_38 分钟前
CSS Position(定位)
前端
xianxin_39 分钟前
CSS Float(浮动)
前端