css画三角形案例_css polygon(0 50%, 0 0, 0 0, 0 50%)-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_68658847/article/details/144238292

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .title{
     
            margin: 20px 0;
        }
        .jiantou1 {
     
            /* 
                polygon参数为(x1 y1, x2 y2, x3 y3,......)
                每组代表一个点的横纵坐标，使用,分割
                例如：(0 0, 50% 50%, 50% 0)
                表示左上角为(0,0)，右上角为(100%,0%)，右下角为(100%,100%)，左下角为(0,100%)

                支持像素，vh和vw单位，百分比单位,也支持rem/em这种依赖于字体的单位
            */
            clip-path: polygon(0 0, 0% 100%, 100% 0);
            width: 50px;
            /* 三角形的底边宽度 */
            height: 50px;
            /* 三角形的高度 */
            background-color: #3498db;
            /* 三角形的颜色 */
        }
        .jiantou2 {
     
            clip-path: polygon(100% 0%, 0% 0%, 100% 100%);
            width: 50px;
            height: 50px;
            background-color: #3498db;
        }
        .jiantou3{
     
            clip-path: polygon(0% 100%, 0% 0%, 100% 100%);
            width: 50px;
            height: 50px;
            background-color: #3498db;
        }
        .jiantou4{
     
            clip-path: polygon(100% 100%, 100% 0%, 0% 100%);
            width: 50px;
            height: 50px;
            background-color: #3498db;
        }
        .jiantou5{
     
            clip-path: polygon(50% 0%, 0% 100%, 100% 100%);