html+css实现三角形

最新推荐文章于 2024-07-25 14:15:14 发布

发呆的薇薇°

最新推荐文章于 2024-07-25 14:15:14 发布

阅读量491

点赞数 1

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/Shivy_/article/details/113443495

版权

css 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

介绍

通过 html + css , 实现不同方向的三角形

效果图

在这里插入图片描述

需求背景

现在经常会发现很多网页上的导航, 分类页等页面, 都会使用一个三角符号去指向内容，效果简洁美观 ; 并且现在很多的前端面试中, 也会问到怎么在网页当中实现一个三角的符号，所以自己做了, 各个方向的三角符号, 记得收藏哦~

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小三角</title>
    <style>
        .index {
            height: 200px;
            width: 500px;
            margin: 50px auto;
            background-color: #ddd;
        }
        .up{
        width:0px;
        height:0px;
        border-bottom:30px solid #fff;
        border-left:15px solid transparent;
        border-right:15px solid transparent;
        margin:10px auto;
        }
        .down{
        width:0px;
        height:0px;
        border-top:30px solid #fff;
        border-left:15px solid transparent;
        border-right:15px solid transparent;
        margin:10px auto;
        }
        .left{
        width:0px;
        height:0px;
        border-right:30px solid #fff;
        border-top:15px solid transparent;
        border-bottom:15px solid transparent;
        margin:10px auto;
        }
        .right{
        width:0px;
        height:0px;
        border-left:30px solid #fff;
        border-top:15px solid transparent;
        border-bottom:15px solid transparent;
        margin:10px auto;
        }
        </style>
</head>
<body>
    <div class="index">
        <!-- 正三角 -->
        <div class="up"></div>
        <!-- 倒三角 -->
        <div class="down"></div>
        <!-- 左边三角 -->
        <div class="left"></div>
        <!-- 右边三角 -->
        <div class="right"></div>
    </div>
</body>
</html>

发呆的薇薇°

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
html+css实现三角形

介绍通过 html + css , 实现不同方向的三角形效果图需求背景现在经常会发现很多网页上的导航, 分类页等页面, 都会使用一个三角符号去指向内容，效果简洁美观 ; 并且现在很多的前端面试中, 也会问到怎么在网页当中实现一个三角的符号，所以自己做了, 各个方向的三角符号, 记得收藏哦~代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <met
复制链接

扫一扫

专栏目录