CSS常用效果制作（持续更新）

screamn

于 2023-11-06 19:52:09 发布

阅读量56

点赞数

分类专栏： CSS 前端文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/screamn/article/details/134248757

版权

前端同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

CSS

14 篇文章 0 订阅

订阅专栏

当掌握前面的那些基础知识后，现在我们需要对我们所学知识进行练习所以,让我们来练习制作一些炫酷的界面吧。

1.制作一个三角形
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>制作三角形</title>
    <style>
        .triangle {
            width: 0;
            height: 0;
            border: 50px solid transparent;
            /* 致敬pink老师 */
            border-left-color: pink;
        }
    </style>
</head>

<body>
    <div class="triangle"></div>
</body>

</html>
讲解：制作这个三角形的时候，我们不能给定盒子宽高，使用的是边框，大小控制三角形大小的显示。

现在我将逐步分析：

当我为盒子指定大小的时候
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>制作三角形</title>
    <style>
        .triangle {
            width: 10px;
            height: 10px;
            border: 50px solid transparent;
            /* 致敬pink老师 */
            border-left-color: pink;
            border-right-color: black;
            border-bottom-color: red;
            border-top-color: yellow;
        }
    </style>
</head>

<body>
    <div class="triangle"></div>
</body>

</html>
盒子的显示

我们发现实际上盒子大小只有10px*10px 所以三角形的实现是边框大小控制的，那为什么呈现的是一个三角形而不是一条线？

这是我们平常的边框。

实际上边框的大小是按照比例分配的，每个25%,

所以当把盒子大小设置成0px*0px的时候，将剩余三条边的颜色设置成透明色，他此时会显示成一个三角形，我们通过设置颜色来表示他的朝向，通过设置边框的大小来设置三角形的大小。

Plus版制作一个非等腰直角三角形
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>制作直角三角形</title>
    <style>
        .triangle {
            width: 0;
            height: 0;
            border-bottom: 50px solid pink;
            border-left: 100px solid transparent;
        }
    </style>
</head>
<body>
    <div class="triangle"></div>
</body>
</html>
这种效果用在秒杀进度条这种上面，主要是学习一下制作，一般还是使用图标做的这种效果