纯css实现三角形、菱形、梯形、等效果

最新推荐文章于 2023-10-19 15:58:15 发布

牛牪犇0

最新推荐文章于 2023-10-19 15:58:15 发布

阅读量2.5k

点赞数 3

分类专栏： HTML 笔记文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_49549509/article/details/120226103

版权

笔记同时被 2 个专栏收录

61 篇文章 0 订阅

订阅专栏

HTML

7 篇文章 0 订阅

订阅专栏

需求

在这里插入图片描述
有这么一个小东西需要实现一下，但是不想直接放一个图片，就随便写了写，，

首先实现一个三角形：
1.首先，我创建了一个 class 名为 ‘box’ 的div，我们暂且亲切的称它为‘小盒子’

html：

<div class='box'>
</div>

css：

.box
       {
           width:20px;
           height:20px;
           background-color:blue;
           }

我们看一下效果，其实就是一个普通的，背景颜色为蓝色的div。
在这里插入图片描述
2，然后，我们给‘小盒子’添加四条边框样式，边框设置的宽一点，四条边框的颜色给不一样的值，方便我们查看，

.box
        {
            width:50px;
            height:50px;
            background-color:blue;
             
            border-top:50px solid red;
            border-right:50px solid yellow;
            border-bottom:50px solid green;
            border-left:50px solid pink;
            }

看看效果，已经是一个比较花哨的存在了。

在这里插入图片描述
3，然后，我们把‘小盒子’的宽高设置为0px，去掉蓝色的背景色，当然就只剩下四周的边框了，脑补一下，然后我们上代码，看卡效果。

.box
        {
            width:0px;
            height:0px;

            border-top:50px solid red;
            border-right:50px solid yellow;
            border-bottom:50px solid green;
            border-left:50px solid pink;
            }

来，上效果，look一下！童鞋们，我么似乎已经看到了4个颜色不同的三角形了，接下来要做的步骤，就很清晰了。
　在这里插入图片描述

4，假设我们想要一个向上的三角形，只要把‘小盒子’上、右、左方向边框的颜色设置为透明，就只剩下下边框，也就是向上的小三角了，来上代码，look一下！

.box
        {
            width:0px;
            height:0px;

            border-top:50px solid rgba(0,0,0,0);
            border-right:50px solid  rgba(0,0,0,0);
            border-bottom:50px solid green;
            border-left:50px solid  rgba(0,0,0,0);
            }

看效果！绿色的向上的小三角就出现了
在这里插入图片描述
------------------------------------css做梯形---------------------------------------------

我们先理理思路，大家想一想，梯形是怎么构成的，小学的数学课本都讲过的，就拿等腰梯形来说，是由两个直角三角形，和一个长方形或正方形组成的，看草图↓
　　在这里插入图片描述
这意味着，我们要用三个‘小盒子’来拼接成一个梯形，这么一说大家的思路是不是豁然开朗了，

不多说，来，继续分析，

1，首先，做三个‘小盒子’ 1号，和3号小盒子都做成小三角形，2号小盒子做成一个正方形。

html：

  <div class='box'>
    </div>
    <div class='box2'>
    </div>
    <div class='box3'>
    </div>

css：

.box,.box3
        {
            width:0px;
            height:0px;

            border-top:50px solid rgba(0,0,0,0);
            border-right:50px solid  rgba(0,0,0,0);
            border-bottom:50px solid green;
            border-left:50px solid  rgba(0,0,0,0);

            margin-bottom:10px;
            }

            .box2
        {
            width:50px;
            height:50px;
            background-color:green;
            }

先看看效果↓
在这里插入图片描述
2，有人要问了，形状是出来了，但是怎么拼起来呢，这里就要用到css中的定位指示和 css3 里的transfrom 了。不了解的话，w3c里都有详细的解释，我这里只管实现我们要的效果。

3，先把所有的‘小盒子’排成一排，使块状元素排成一排的方法：可以给‘小盒子’加浮动 float，也可以直接设置‘小盒子’的display：inline-block；由于我的习惯是只要加浮动，就要给父元素清浮动，比较麻烦，我就直接设置‘小盒子’的display：inline-block 了。
　　在这里插入图片描述
4,最后设置一下 1号，和3号小盒子的位移就ok了，看代码↓

.box{
                transform: translate(54px,10px);
            }
            .box3{
                transform: translate(-54px,10px);
            }

再看看效果↓
在这里插入图片描述

----------------------再来看看菱形-------------------------------------------------------------
菱形需要的是偏移transform属性，单独的出来的样式是这样的在这里插入图片描述

position: absolute;
        display: inline-block;
        width: 50px;
        height: 50px;
        background: linear-gradient(to top,rgba(33, 78, 84, 1),rgba(33, 78, 84, 1));
        transform: rotateZ(120deg)skew(30deg,30deg);
        margin-top: -14px;
        margin-left: -2px;
        border: 1px solid rgba(6, 255, 127, 0.5);
        content: "";

按照我需要的设计图来说做出来的效果是这样的：
　在这里插入图片描述
介绍到这里，我们已经用css 把梯形做出来了，还有其他的图形，比如平行四边形等，类似的东西，举一反三，都可以通过这种方法做出来，在这里我就不一一介绍了。最后，祝大家学习愉快。
完整代码如下：

<!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>tixing</title>
</head>
<body>
    <div style="position: absolute;">
        <div class='box'>
        </div>
        <div class='box2'>
        </div>
    </div>
</body>
<style>
    .box
        {
            display: inline-block;
            width:0px;
            height:0px;
            transform: translate(15px,20px);
            border-top:10px solid red;
            border-right:10px solid  rgba(0,0,0,0);
            border-bottom:10px solid rgba(0,0,0,0);
            border-left:10px solid  rgba(0,0,0,0);
            margin-bottom:10px;
            }

            .box2
            {
            width:100px;
            display: inline-block;
            height:10px;
            background-color:red;
            }
            .box2:after {
                position: absolute;
                display: inline-block;
                top: 21px;
                left: 94px;
                width: 15px;
                height: 8px;
                background: black;
                transform: rotateZ(
            118deg
            )skew(
            30deg
            ,
            30deg
            );
                content: "";
            }
            .box:after {
                position: absolute;
                display: inline-block;
                top: -9px;
                left: 29px;
                width: 15px;
                height: 8px;
                background: black;
                transform: rotateZ(
            118deg
            )skew(
            30deg
            ,
            30deg
            );
                content: "";
            }
            
</style>
</html>