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 即可(其它情况同理)。

相关推荐
Justin3go3 小时前
两年后又捣鼓了一个健康类小程序
前端·微信小程序
巴巴_羊5 小时前
xss和csrf
前端·xss·csrf
华子w9089258595 小时前
基于 Python Web 应用框架 Django 的在线小说阅读平台设计与实现
前端·python·django
烛阴6 小时前
让你的Python并发飞起来:多线程开发实用技巧大全
前端·python
旺代6 小时前
Vue3中的v-model、computed、watch
前端
excel6 小时前
微信小程序鉴权登录详解 —— 基于 wx.login 与后端 openid 换取流程
前端
Gazer_S6 小时前
【前端隐蔽 Bug 深度剖析:SVG 组件复用中的 ID 冲突陷阱】
前端·bug
蓝婷儿7 小时前
每天一个前端小知识 Day 7 - 现代前端工程化与构建工具体系
前端
mfxcyh8 小时前
npm下载离线依赖包
前端·npm·node.js
waterHBO8 小时前
01 ( chrome 浏览器插件, 立马翻译), 设计
前端·chrome