我用网格布局实现奥运五环
这是我参与11月更文挑战的第2天，活动详情查看：2021最后一次更文挑战
最近总结了网格布局的使用，可以看这篇文章布局的神--网格布局最全总结，建议收藏)
然后想着画一个有意思的网格。然后无意间就看见了奥运五环。
思路分析
想着想着觉得可以实现，那就开始布局思考。应该切割成几份呢。
最后对着图片一阵分析，决定切成3*6的网格。下面是草图
那其实完全可以切割的少一点的，每一个都作为半圆，但是因为有一些重叠部分，同一个圈圈在上面也可以在下面。所以分的越细，效果越好。每一个圈圈中间还有空格，所以分的越细效果越好。
代码实践
既然想法有了，那就开始动手。很明显我们要把每一个网格div设置边框和颜色，分别为左上角半圆、右上角半圆、左下角半圆、右下角半圆。
左上角半圆：border-radius: 100% 0 0 0; 右上角半圆：border-radius: 0 100% 0 0; 左下角半圆: border-radius: 0 0 0 100%; 右下角半圆：border-radius: 0 0 100% 0;
然后就是直接上代码，具体的网格使用可以看我开头发的博客链接。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
<div class="item4"></div>
<div class="item5"></div>
<div class="item6"></div>
<div class="item7"></div>
<div class="item8"></div>
<div class="item9"></div>
<div class="item10"></div>
<div class="item11"></div>
<div class="item12"></div>
<div class="item13"></div>
<div class="item14"></div>
<div class="item15"></div>
<div class="item16"></div>
<div class="item17"></div>
<div class="item18"></div>
</div>
</body>
<style>
* {
margin: 0px;
padding: 0px;
}
body {
height: 100%;
}
.container {
width: 400px;
height: 200px;
/* background: cyan; */
display: grid;
grid-template-columns: repeat(6,50px);
grid-template-rows: repeat(3,50px);
justify-content: center;
align-content: center;
}
.container>div{
/* background: chocolate; */
}
/* 篮圈 */
.item1{
border-radius: 100% 0 0 0;
border-top:2px solid #0F85CC;
border-left:2px solid #0F85CC;
}
.item2{
border-radius: 0 100% 0 0;
border-top:2px solid #0F85CC;
border-right:2px solid #0F85CC;
}
.item7{
border-radius: 0 0 0 100%;
border-bottom:2px solid #0F85CC;
border-left:2px solid #0F85CC;
}
.item8{
border-radius: 100% 0 100% 0;
border-bottom:2px solid #0F85CC;
border-right:2px solid #0F85CC;
border-top:2px solid #F9A410;
border-left:2px solid #F9A410;
}
/* 黑圈 */
.item3{
border-radius: 100% 0 0 0;
border-top:2px solid #242826;
border-left:2px solid #242826;
}
.item4{
border-radius: 0 100% 0 0;
border-top:2px solid #242826;
border-right:2px solid #242826;
}
.item9{
border-radius: 0 100% 0 100%;
border-bottom:2px solid #242826;
border-left:2px solid #242826;
border-top:2px solid #F9A410;
border-right:2px solid #F9A410;
}
.item10{
border-radius: 100% 0 100% 0;
border-bottom:2px solid #242826;
border-right:2px solid #242826;
border-top:2px solid #0A9D49;
border-left:2px solid #0A9D49;
}
/* 红圈 */
.item5{
border-radius: 100% 0 0 0;
border-top:2px solid #E60537;
border-left:2px solid #E60537;
}
.item6{
border-radius: 0 100% 0 0;
border-top:2px solid #E60537;
border-right:2px solid #E60537;
}
.item11{
border-radius: 0 100% 0 100%;
border-bottom:2px solid #E60537;
border-left:2px solid #E60537;
border-top:2px solid #0A9D49;
border-right:2px solid #0A9D49;
}
.item12{
border-radius: 0 0 100% 0;
border-bottom:2px solid #E60537;
border-right:2px solid #E60537;
}
/* 橙色 */
.item14{
border-radius: 0 0 0 100%;
border-bottom:2px solid #F9A410;
border-left:2px solid #F9A410;
}
.item15{
border-radius: 100% 0 100% 0;
border-bottom:2px solid #F9A410;
border-right:2px solid #F9A410;
}
/* 绿色 */
.item16{
border-radius: 0 0 0 100%;
border-bottom:2px solid #0A9D49;
border-left:2px solid #0A9D49;
}
.item17{
border-radius: 100% 0 100% 0;
border-bottom:2px solid #0A9D49;
border-right:2px solid #0A9D49;
}
</style>
</html>
最后的效果图:
