search

lixiaojuan12 / Summary-of-css

css总结
2 stars 2 forks source link

22. 画一个三角形、扇形，将一个圆分为四部分，对角部分是相同颜色，相邻部分为不同颜色 #26

Open lixiaojuan12 opened 4 years ago

lixiaojuan12 commented 4 years ago

效果： image

<!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>
        .triangle {
            width: 0;
            height: 0;
            border-width: 30px 20px;
            border-color: transparent red red transparent;
            border-style: solid;
        }

        .sector {
            width: 0;
            height: 0;
            border-width: 30px 20px;
            border-color: transparent transparent red transparent;
            border-style: solid;
            border-radius: 100%;
        }

        .circle {
            width: 0;
            height: 0;
            border-width: 50px;
            border-style: solid;
            border-color: red green red green;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <div class="triangle"></div>
    <hr>
    <div class="sector"></div>
    <hr>
    <div class="circle"></div>

</body>

</html>