HTML实现奥运五环

最新推荐文章于 2024-01-13 12:31:39 发布

好友动态

最新推荐文章于 2024-01-13 12:31:39 发布

阅读量653

点赞数

文章标签： css3 css html

本文链接：https://blog.csdn.net/iostreamM/article/details/121339625

版权

<!DOCTYPE html>
<html>
<head>
    <title>奥运五环</title>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    .wrapper{
        width: 780px;
        height: 370px;
        border:1px solid black;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -390px;
        margin-top: -185px;
    }
    .circle{
        width: 200px;
        height: 200px;
        border-radius: 50%;
        position: absolute;
    }
    /*蓝黑红黄绿*/
    .blue{
        border:20px solid blue;
    }
    .blue2{
        border:20px solid transparent;
        border-right-color: blue;
        z-index: 2;
    }
    .black{
        border:20px solid black;
        left: 270px;
    }
    .black2{
        border:20px solid transparent;
        border-bottom-color: black;
        border-right-color: black;
        left: 270px;
        z-index: 2;
    }
    .red{
        border:20px solid red;
        left: 540px;
    }
    .red2{
        border:20px solid transparent;
        border-left-color: red;
        left: 540px;
        z-index: 2;
    }
    .yellow{
        border:20px solid yellow;
        left: 140px;
        top:130px;
    }
    .green{
        border:20px solid green;
        left: 410px;
        top:130px;
    }
    .green2{
        border:20px solid transparent;
        border-left-color: green;
        left: 410px;
        top:130px;
        z-index: 2;
    }
</style>
</head>
<body>
    <div class="wrapper">
        <div class = "circle blue"></div>
        <div class = "circle blue2"></div>
        <div class = "circle black"></div>
        <div class = "circle black2"></div>
        <div class = "circle red"></div>
        <div class = "circle red2"></div>
        <div class = "circle yellow"></div>
        <div class = "circle green"></div>
        <div class = "circle green2"></div>
    </div>
</body>
</html>

好友动态

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
HTML实现奥运五环

<!DOCTYPE html><html><head> <title>奥运五环</title><style type="text/css"> *{ margin: 0; padding: 0; } .wrapper{ width: 780px; height: 370px; border:1px solid black.
复制链接

扫一扫