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

相关推荐
漂流瓶jz9 分钟前
JavaScript语法树简介:AST/CST/词法/语法分析/ESTree/生成工具
前端·javascript·编译原理
换日线°10 分钟前
css 不错的按钮动画
前端·css·微信小程序
风象南17 分钟前
前端渲染三国杀:SSR、SPA、SSG
前端
90后的晨仔34 分钟前
表单输入绑定详解:Vue 中的 v-model 实践指南
前端·vue.js
陈佬昔没带相机1 小时前
围观前后端对接的 TypeScript 最佳实践,我们缺什么?
前端·后端·api
90后的晨仔1 小时前
Vue 事件处理深入指南:从基础到进阶
前端·vue.js
qq_427506082 小时前
JavaScript和小程序写水印的方法示例
前端·算法·微信小程序
拾光拾趣录3 小时前
前端面试真题深度解析:从原型到安全,七道题看透核心能力
前端·面试
烛阴3 小时前
告别重复劳动:Gulp.js 新手入门教程
前端·javascript