html+css练习：画三角形

半吊子的程序狗

于 2024-07-28 15:07:19 发布

阅读量121

点赞数 3

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/u010031813/article/details/140750982

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .div1{

            width: 10px;
            height: 10px;
            margin: 0 auto;
            /* border: 1px solid red; */
            border-left: 100px solid red;
            border-right: 100px solid blue;
            border-top: 100px solid palegreen;
            border-bottom: 100px solid greenyellow;
       
            
         
        }


        .div2{

            width: 0px;
            height: 0px;
            margin: 0 auto;
            /* border: 1px solid red; */
            border-left: 100px solid red;
            border-right: 100px solid blue;
            border-top: 100px solid palegreen;
            border-bottom: 100px solid greenyellow;
 

            }

            .div3{

width: 0px;
height: 0px;
margin: 0 auto;
/* border: 1px solid red; */
border-left: 100px solid transparent;
border-right: 100px solid blue;
border-top: 100px solid transparent;
border-bottom: 100px solid greenyellow;


}
        
    </style>
</head>
<body>
    <div class="div1">

    </div>
    <hr>
     <h2 style="margin: 0 auto;width: 800px; height: 80px;">
        1.上面的div中的width和height给了10px;下面的width和height都是0
        <br>
        2.边框背景色可以设置transparent
     </h2>
     <hr>
    <div class="div2">

    </div>
<hr>
    <div class="div3">

    </div>


</body>
</html>