使用边框属性书写一个三角形型的风车

最新推荐文章于 2024-08-04 16:33:59 发布

沐瑾♚

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量120

点赞数

文章标签： javascript css html

本文链接：https://blog.csdn.net/qq_48289073/article/details/130443642

版权

前言：

想要使用边框属性写三角形型的风车，首先要先会用边框书写三角形，前面一篇文章中有讲，不会的可以往前翻阅。下面附上链接：使用边框属性写三角形

正文如下：

首先，我们要实现的三角形型的风车如下图：

下面我们开始讲述如何实现上图的效果：

第一步：上图风车中，共有四片风车叶子，所以我们需要再html中书写四个div容器，为了区分每个盒子，给每个盒子取一个类名。代码如下图所示：

<!--此处代码书写在html中-->
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
</body>

第二步：接着在css中书写每个盒子的样式。（下面分步为大家介绍每个盒子的css代码，如果有需要可在文章尾部自取完整的css代码）

首先，书写box1的样式，代码如下：

/*此处代码书写在css中*/
.box1{
            width: 0px;
            height: 0px;
            border-top: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 50px solid plum;
            border-left: 50px solid transparent;
        }

第三步：接着书写box2的样式，如下图代码：

/*此处代码书写在css中*/
.box2{
            width: 0px;
            height: 0px;
            border-top: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 50px solid transparent;
            border-left: 50px solid plum;
        }

注意：此时按照第二和三步完成之后，你会发现风车与我们想要的图片有了差距（见下图），之所以会出现这种差距是因为div是自己独占一行的标签，因为box1已经把上面的空间占据了，所以box2无法与box1在一行显示。因此，此时需要对上述第二，三两步中对box1，box2添加浮动。这里我给他们都添加了左浮动，代码与效果图都见下。

效果图1：（未添加浮动的效果图）

效果图2：（添加浮动之后的代码和效果图）

/*此处代码书写在css中*/
.box1{
            width: 0px;
            height: 0px;
            border-top: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 50px solid plum;
            border-left: 50px solid transparent;
            /* 添加左浮动 */
            float: left;
        }
        .box2{
            width: 0px;
            height: 0px;
            border-top: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 50px solid transparent;
            border-left: 50px solid plum;
            /* 添加左浮动 */
            float: left;
        }

第四步：书写box3的代码，此时如果像上述一样为box3添加左浮动，我们会发现依旧行不通，我们还是无法完成效果图中的那种效果，那此时会是什么效果呢，下面请看代码及效果：

/*此处代码书写在css中*/
.box3{
            width: 0px;
            height: 0px;
            border-top: 50px solid transparent;
            border-right: 50px solid plum;
            border-bottom: 50px solid transparent;
            border-left: 50px solid transparent;
            float: left;
        }

此时我们发现，虽然我们已经让第三个三角形显示出来了。但是，它却与box1，box2显示在了一行。效果图中我们并不需要它们在一行显示，应该如何操作呢？

解决方法：在box3中设置一个清除浮动的属性，可以清除前面浮动元素带来的影响。具体见代码（效果图也在下）：

/*此处代码书写在css中*/
.box3{
            width: 0px;
            height: 0px;
            border-top: 50px solid transparent;
            border-right: 50px solid plum;
            border-bottom: 50px solid transparent;
            border-left: 50px solid transparent;
            float: left;
            /* 清除浮动 */
            clear: both;
        }

第五步：书写box4的代码，代码及效果图见下：

/*此处代码书写在css中*/
.box4{
            width: 0px;
            height: 0px;
            border-top: 50px solid plum;
            border-right: 50px solid transparent;
            border-bottom: 50px solid transparent;
            border-left: 50px solid transparent;
            float: left;
        }

到此，我们的风车就已经完成了。【注意：风车的颜色，大小都可以随自己的喜欢进行改变，为了以示区分，最先给的效果图的风车颜色与我们自己实现的风车颜色有差别。】

最后，为大家附上完整的css代码（上面都是分步讲解的）：

.box1{
            width: 0px;
            height: 0px;
            border-top: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 50px solid plum;
            border-left: 50px solid transparent;
            /* 添加左浮动 */
            float: left;
        }
        .box2{
            width: 0px;
            height: 0px;
            border-top: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 50px solid transparent;
            border-left: 50px solid plum;
            float: left;
        }
        .box3{
            width: 0px;
            height: 0px;
            border-top: 50px solid transparent;
            border-right: 50px solid plum;
            border-bottom: 50px solid transparent;
            border-left: 50px solid transparent;
            float: left;
            /* 清除浮动 */
            clear: both;
        }
        .box4{
            width: 0px;
            height: 0px;
            border-top: 50px solid plum;
            border-right: 50px solid transparent;
            border-bottom: 50px solid transparent;
            border-left: 50px solid transparent;
            float: left;
        }

本文到这就结束了，欢迎大家一起讨论，批评指正！