如何使用CSS画一个三角形

原理：其实就是规定元素的四个边框颜色及边框宽度，将元素宽高设置为0。如果要哪个方向的三角形，将对应其他三个方向的边框宽和颜色设置为0和透明transparent即可

1.元素设置边框，宽高，背景色


<style>
    .border {
        width: 50px;
        height: 50px;
        border: 2px solid;
        border-color: #96ceb4 #ffeead #d9534f #ffad60;
    } 
 
style>
 
<body>
    <div class="border">div>
body>

元素边框为2px的，四个方向颜色不同

2.将元素宽高设置为0，边框宽设置为50px


    .border {
        width:0;
        height: 0;
//注意solid也要设置
        border: 50px solid;
        border-color: #96ceb4 #ffeead #d9534f #ffad60;
    }

元素变为四个三角形组合

3. 设置上、左、右透明度为transparent且设置右和下的边框


    .border {
        width:0;
        height: 0;
        border-style: solid;
        /* border-width: 0 50px 50px 0; */
        border-width: 0 50px 50px;
        /* border-color: transparent transparent #d9534f transparent; */
        border-color: transparent transparent #d9534f;
        position: relative;
    }

只要修改对应两边边框和该方向上以外的透明度即可

相关阅读:
【附源码】计算机毕业设计SSM体检中心流程规划系统
uniapp的表单验证
最新支付宝蚂蚁森林自动偷能量，解放双手
4K三路虚拟情景互动教学软件应用开发
第6章：表单中的受控组件与非受控组件
跨国制造商部署SD-WAN提升全球业务案例分析
自动化测试工具之Selenium IDE录制教程
springboot注解之@ConfigurationProperties注解
玩转Vue3全家桶开篇词丨如何借助Vue3建构你的前端知识体系？
[附源码]计算机毕业设计医院门诊管理信息系统Springboot程序

原文地址：https://blog.csdn.net/qq_34569497/article/details/132743133