萧寂

css画三角形案例

html
<!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%);
            width: 50px;
            height: 25px;
            background-color: #3498db;
        }
        .jiantou6{
            clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
            width: 25px;
            height: 50px;
            background-color: #3498db;
        }
        .jiantou7{
            clip-path: polygon(100% 50%, 0% 100%, 0% 0%);
            width: 25px;
            height: 50px;
            background-color: #3498db;
        }
        .jiantou8{
            clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
            width: 50px;
            height: 25px;
            background-color: #3498db;
        }
        .jiantou9 {
            clip-path: polygon(0 0, 0% 50%, 50% 0);
            width: 50px;
            height: 50px;
            background-color: #3498db;
        }
        .jiantou10 {
            clip-path: polygon(100% 0%, 50% 0%, 100% 50%);
            width: 50px;
            height: 50px;
            background-color: #3498db;
        }
        .jiantou11 {
            clip-path: polygon(0% 100%, 0% 50%, 50% 100%);
            width: 50px;
            height: 50px;
            background-color: #3498db;
        }
        .jiantou12 {
            clip-path: polygon(50% 100%, 100% 50%, 100% 100%);
            width: 50px;
            height: 50px;
            background-color: #3498db;
        }
        .jiantou13{
            clip-path: polygon(50% 50%, 0% 100%, 100% 100%);
            width: 50px;
            height: 50px;
            background-color: #3498db;
        }
        .jiantou14{
            clip-path: polygon(50% 50%, 100% 0%, 100% 100%);
            width: 50px;
            height: 50px;
            background-color: #3498db;
        }
        .jiantou15{
            clip-path: polygon(50% 50%, 0% 100%, 0% 0%);
            width: 50px;
            height: 50px;
            background-color: #3498db;
        }
        .jiantou16{
            clip-path: polygon(50% 50%, 0% 0%, 100% 0%);
            width: 50px;
            height: 50px;
            background-color: #3498db;
        }
    </style>
</head>

<body>
    <h6>整个块是根据箭头的宽高来算(三角形占矩形区域一半)</h6>
    <div class="title">clip-path左上方</div>
    <div class="jiantou1"></div>
    <div class="title">clip-path右上方</div>
    <div class="jiantou2"></div>
    <div class="title">clip-path左下方</div>
    <div class="jiantou3"></div>
    <div class="title">clip-path右下方</div>
    <div class="jiantou4"></div>
    <div class="title">clip-path上方</div>
    <div class="jiantou5"></div>
    <div class="title">clip-path左方</div>
    <div class="jiantou6"></div>
    <div class="title">clip-path右方</div>
    <div class="jiantou7"></div>
    <div class="title">clip-path下方</div>
    <div class="jiantou8"></div>

    <hr>
    <h6>整个块是正方形的案例(会导致宽高对不上,检查元素就会发现很大一部分空白)</h6>
    <div class="title">clip-path左上方</div>
    <div class="jiantou9"></div>
    <div class="title">clip-path右上方</div>
    <div class="jiantou10"></div>
    <div class="title">clip-path左下方</div>
    <div class="jiantou11"></div>
    <div class="title">clip-path右下方</div>
    <div class="jiantou12"></div>
    <div class="title">clip-path上方</div>
    <div class="jiantou13"></div>
    <div class="title">clip-path左方</div>
    <div class="jiantou14"></div>
    <div class="title">clip-path右方</div>
    <div class="jiantou15"></div>
    <div class="title">clip-path下方</div>
    <div class="jiantou16"></div>
</body>

</html>
css画三角形案例 ​

css画三角形案例
