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

相关推荐
大猫会长7 分钟前
vite配置一个css插件
前端·css
shmily_ke24 分钟前
如何将vue2使用npm run build打包好的文件上传到服务器
服务器·前端·npm
清风细雨_林木木1 小时前
Css样式中设置gap: 12px以后左右出现距离问题解析
css·vue.js·elementui
陈随易1 小时前
薪资跳动,VSCode实时显示今日打工收入
前端·后端·程序员
七灵微1 小时前
【前端】SPA v.s. MPA
前端
fqq31 小时前
CSS级联样式(基础知识)备忘录
前端·css
前端小巷子1 小时前
JS深拷贝与浅拷贝
前端·javascript·面试
用户21411832636021 小时前
N8N教程-手把手教你搭建 N8N 自动化工作流:从安装到云部署全流程实战
前端·vue.js
Mintopia1 小时前
Three.js 环境贴图:给你的 3D 世界加个梦幻滤镜
前端·javascript·three.js
Mintopia2 小时前
JavaScript 里的光影魔术师:光线投射
前端·javascript·计算机图形学