H5+CSS3实现奥运5环

最新推荐文章于 2021-12-25 17:03:04 发布

程序猿里我是最帅的

最新推荐文章于 2021-12-25 17:03:04 发布

阅读量624

点赞数

CC 4.0 BY-SA版权

分类专栏： H5+CSS3 文章标签： H5 css3

本文链接：https://blog.youkuaiyun.com/zhangfan_12871/article/details/77351659

H5+CSS3 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用纯CSS实现的圆形布局方法，并展示了如何通过伪元素增强视觉效果。通过对不同颜色圆圈的位置设置及边界样式调整，创建了一个简洁美观的圆形图标布局方案。

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div {
position: absolute;
width: 8em;
height: 8em;
border-width: 1em;
border-style: solid;
border-radius: 50%;
}

div:nth-child(1) {
left: 10em;
top: 3em;
border-color: blue;
}

div:nth-child(2) {
left: 21em;
top: 3em;
border-color: black;
}

div:nth-child(3) {
left: 32em;
top: 3em;
border-color: red;
}

div:nth-child(4) {
left: 15.5em;
top: 8.5em;
border-color: yellow;
}

div:nth-child(5) {
left: 26.5em;
top: 8.5em;
border-color: green;
}

div:nth-child(4):before,
div:nth-child(4):after,
div:nth-child(5):before,
div:nth-child(5):after {
position: absolute;
top: -6.5em;
content: "";
width: 100%;
height: 100%;
border: 1em solid transparent;
border-radius: 50%;
}

div:nth-child(4):before {
left: -6.5em;
border-right-color: blue;
}

div:nth-child(4):after {
left: 4.5em;
border-bottom-color: black;
}

div:nth-child(5):before {
left: -6.5em;
border-right-color: black;
}

div:nth-child(5):after {
left: 4.5em;
border-bottom-color: red;
}
</style>
</head>

<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>

</html>