CSS也能画三角形！

最新推荐文章于 2023-11-01 14:11:45 发布

城楠_327

最新推荐文章于 2023-11-01 14:11:45 发布

阅读量95

点赞数

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

本文链接：https://blog.csdn.net/weixin_46647170/article/details/117536599

版权

CSS栏专栏收录该内容

10 篇文章 0 订阅

订阅专栏

在画三角形之前，我们先看看三角形是怎么来的:
我们先设定一个大小为0，但是大小相同但是颜色不同的4边框，看看会是什么样的效果：

<style>
        div {
            width: 0px;
            height: 0px;
            border-top: 50px solid red;
            border-bottom: 50px solid pink;
            border-left: 50px solid blue;
            border-right: 50px solid yellow;
        }
    </style>

<body>
    <div></div>
</body>

在这里插入图片描述
看到这里应该能猜到三角形该怎么画了吧，根据自己需要的三角形方向，然后隐藏另外3个三角形就ok啦！

首先我们先将四个边框都设置好大小和透明色，然后根据自己所需单独给一边设置颜色,就大功告成啦：

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

在这里插入图片描述
把四个三角都画出来！

		div {
            float: left;
        }
        
        /* 下三角 */
        .div1 {
            width: 0px;
            height: 0px;
            border: 50px solid transparent;
            border-top-color: pink;
        }
        
        /* 上三角 */
        .div2 {
            width: 0px;
            height: 0px;
            border: 50px solid transparent;
            border-bottom-color: red;
        }
        
        /* 右三角  */
        .div3 {
            width: 0px;
            height: 0px;
            border: 50px solid transparent;
            border-left-color: skyblue;
        }
        
        /* 左三角 */
        .div4 {
            width: 0px;
            height: 0px;
            border: 50px solid transparent;
            border-right-color: yellow;
        }

在这里插入图片描述

那么三角有什么用呢？
在各大网站上都有三角的身影，比如CSDN：
在这里插入图片描述
还有我们的学习网站bilibili：

那我也来简单做一个小案例吧！

    <style>
        .list {
            margin: 100px auto;
            width: 100px;
            height: 200px;
            border-radius: 5px;
            background-color: #fff;
            box-shadow: 0px 0px 14px -6px;
            position: relative;
            display: flex;
            flex-direction: column;
        }
        
        .triangle {
            width: 0;
            height: 0;
            border: 8px solid transparent;
            border-bottom-color: #fff;
            /* 利用绝对定位将小三角定位到盒子正上方 */
            position: absolute;
            top: -16px;
            left: 50%;
            transform: translateX(-8px);
        }
        
        .item {
            flex-grow: 1;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>

<body>
    <div class="list">
        <div class="triangle"></div>  <!-- 小三角 -->
        <div class="item">论坛</div>
        <div class="item">代码</div>
        <div class="item">直播</div>
        <div class="item">Chorme插件</div>
        <div class="item">能力认证</div>
    </div>
</body>

在这里插入图片描述

这阴影就有点。。。凑合着看吧！！！

城楠_327

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS也能画三角形！

在画三角形之前，我们先看看三角形是怎么来的:我们先设定一个大小为0，但是大小相同但是颜色不同的4边框，看看会是什么样的效果：<style> div { width: 0px; height: 0px; border-top: 50px solid red; border-bottom: 50px solid pink; border-left: 50px s
复制链接

扫一扫