1. 程式人生 > >兩種寫三角形的方式

兩種寫三角形的方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .first{
            width:100px;
            height:100px;
            background:#333;
            clip-path: polygon(50% 0,100% 100%,0 100%);
        }
        .second{
            width:0;
            height:0;
            border-width:0 50px 100px;
            border-style:solid;
            border-color: transparent transparent #f00;
            position:relative;
        }
    </style>
</head>
<body>
<div class="first"></div>
<div class="second"></div>
</body>
</html>