第一次分享会

最新推荐文章于 2022-03-12 19:57:29 发布

11BZou

最新推荐文章于 2022-03-12 19:57:29 发布

阅读量153

点赞数 1

本文链接：https://blog.csdn.net/qq_52159101/article/details/110544790

版权

第一次分享会

六芒星

我们不妨可以看出,六芒星是由两个上下颠倒的等边三角形重叠而成,因此我们只需要做出两个上下颠倒的等边三角形然后利用定位将其重叠即可.

首先,我们需要做出两个三角形,而三角形又是怎样做成的呢?
我们先来看下面的代码:

<head>
	<style>
		div{
			border: 50px solid;
			border-color: red green blue yellow;
			width: 0;
			height: 0;
		}
	</style>
</head>
<body>
	<div></div>
</body>

此时得到如下结果:
在这里插入图片描述
由此我们可以看出,三角形是由边框做成,因此我们只需将其中三边的边框遮住即可得到一个三角形.

div{
	border: 50px solid;
	border-color: transparent transparent black transparent;
	width: 0;
	height: 0;
}

在这里插入图片描述
接下来我们就要将这个直角三角形改成等边三角形,需要改变它的border-width.

div{
	border: 50px solid;
	border-color: transparent transparent black transparent;
    width: 0;     
    height: 0;
    border-width: calc(50px * 1.7320508) 50px;
}

在这里插入图片描述

border-width后面跟两个值时分别代表上下边框和左右边框的宽度,而上下边框宽度即为这个三角形的高,左右边框宽度即为这个三角形底边的一半,我们知道等边三角形高与底边一半的比值为√3(约等于1.7320508),因此将该属性如上述代码设置.

这样一个等边三角形就做好了,同理我们可以得到另一个三角形.

在这里插入图片描述
两个等边三角形做好后,我们只需要利用定位将其重叠即可.

完整代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hexameron</title>
    <style>
        div{
            border: 50px solid;
            width: 0;
            height: 0;
            border-width: calc(50px * 1.7320508) 50px;
        }
        .one{
            border-color: black transparent transparent transparent;
            position: relative;
            top: 290px;
        }
        .two{
            border-color: transparent transparent black transparent;
        }
    </style>
</head>
<body>
        <div class="one"></div>
        <div class="two"></div>
</body>
</html>

最终我们就能够得到六芒星了!
在这里插入图片描述

奥运五环

奥运五环是由五个大小相同颜色不同的圆环组成,重点同样在于边框的设置上.

首先我们需要设置五个div,并设置一些相同的css样式.

<head>
	<style>
		.item{
            width: 150px;
            height: 150px;
            border: 6px solid red;
            box-sizing: border-box;
        }
        </style>
</head>
<body>
	<div class="item circle1"></div>
    <div class="item circle2"></div>
    <div class="item circle3"></div>
    <div class="item circle4"></div>
    <div class="item circle5"></div>
</body>

此时得到如下五个竖直排列的方框.
在这里插入图片描述
要想将方框改成圆框,这里需要用到border-radius属性.

.item{
	width: 150px;
    height: 150px;
    border: 6px solid red;
    box-sizing: border-box;
    border-radius: 50%;
}

将border-radius属性设置为50%即可得到圆框.

在这里插入图片描述
然后我们按照奥运五环的颜色分别设置这五个圆环,并给他们设置绝对定位调整好位置即可.

	.item{
            position: absolute;
            width: 150px;
            height: 150px;
            border: 6px solid red;
            box-sizing: border-box;
            border-radius: 50%;
        }
	.circle1{
            border-color: blue;
        }
    .circle2{
            left: 130px;
            border-color: black;
        }
    .circle3{
            left: 260px;
            border-color: red;
        }
    .circle4{
            left: 65px;
            top: 110px;
            border-color: yellow;
        }
    .circle5{
            left: 195px;
            top: 110px;
            border-color: green;
        }

最终结果如下图:
在这里插入图片描述
假若我们想要让这个奥运五环在垂直和水平方向居中:

在这五个圆环外套一个div,并给这个div设置一个绝对定位,使五个圆环相对这个div(最小的定位父元素)进行定位,然后设置其宽高恰好为五环的边界,设置top和left使这个div的左上角定位到中央,再设置margin将五环居中即可.

完整代码如下:

<head>
    <style>
        .item{
            position: absolute;
            width: 150px;
            height: 150px;
            border: 6px solid red;
            box-sizing: border-box;
            border-radius: 50%;
        }
        .circle1{
            border-color: blue;
        }
        .circle2{
            left: 130px;
            border-color: black;
        }
        .circle3{
            left: 260px;
            border-color: red;
        }
        .circle4{
            left: 65px;
            top: 110px;
            border-color: yellow;
        }
        .circle5{
            left: 195px;
            top: 110px;
            border-color: green;
        }
        .content{
            height: 260px;
            width: 410px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -130px 0 0 -205px;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="item circle1"></div>
        <div class="item circle2"></div>
        <div class="item circle3"></div>
        <div class="item circle4"></div>
        <div class="item circle5"></div>
    </div>
</body>