用纯 CSS 创建一个三角形

1. 实现代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div></div>
    </body>
</html>

//style.css
div{
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid red;
}

2. 一步一步理解创建原理（原理是相邻边框连接处是均分的原理。）

创建一个正方形，宽高为 100px，背景颜色为黑色

div{
    width: 100px;
    height: 100px;
    background-color: black;
}

设置上边框

div{
    width: 100px;
    height: 100px;
    background-color: black;
    border-top: 50px solid yellow;       
}

设置左边框

div{
    width: 100px;
    height: 100px;
    background-color: black;
    border-top: 50px solid yellow;
    border-left: 50px solid green;    
}

设置右边框

div{
    width: 100px;
    height: 100px;
    background-color: black;
    border-top: 50px solid yellow;
    border-left: 50px solid green;
    border-right: 50px solid blue;    
}

设置下边框

div{
    width: 100px;
    height: 100px;
    background-color: black;
    border-top: 50px solid yellow;
    border-left: 50px solid green;
    border-right: 50px solid blue;
    border-bottom: 50px solid red;      
}

将盒子宽高设置为 0

div{
    width: 0;   
    height: 0;   
    border-top: 50px solid yellow;
    border-left: 50px solid green;
    border-right: 50px solid blue;
    border-bottom: 50px solid red;
}

将上、左、右边框颜色设置为透明 transparent

div{
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid red;
}

转自：https://www.cnblogs.com/xiaoxuStudy/p/13386412.html

相关阅读:
OpenCV程序在生产环境中运行
C#调用C++导出（dllexport）方法
IIS7.5 GZip配置
wcf学习笔记--初识wcf
Greenplum installation guide
Cloudera 5.8.2 Installation guide
WPF DataGrid 合并单元格
wpf DataGrid CheckBox列全选
WPF button 圆角制作
WPF passwordbox 圆角制作

原文地址：https://www.cnblogs.com/vickylinj/p/14196825.html