css案例4——小三角、纯css代码

最新推荐文章于 2024-06-19 14:48:22 发布

耶啵奶膘

最新推荐文章于 2024-06-19 14:48:22 发布

阅读量501

点赞数

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

本文链接：https://blog.csdn.net/xulihua_75/article/details/124944163

版权

CSS 专栏收录该内容

37 篇文章 2 订阅

订阅专栏

一、案例描述

我们能经常见到这样的一种效果（如下），列表前方有个小三角，这个小三角使用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>列表</title>
    <style>
        ul li {
            list-style: none;
        }
        
        span {
            display: inline-block;
            width: 0;
            height: 0;
            border: 5px solid transparent;
            border-left: 5px solid green;
        }
    </style>
</head>

<body>
    <ul>
        <li><span></span>首页</li>
        <li><span></span>新闻</li>
        <li><span></span>关于</li>
    </ul>
</body>

</html>

三、原理分析

小三角实现的原理非常简单，主要是对边框的一个处理。
有一个盒子，默认宽度和高度为0，添加边框，那么我们看到的就只是一个边框线而已，边框分为上下左右四个边框，我分别让他们显示不同的颜色看看。如下：
在这里插入图片描述

span {
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 5px solid pink;
    border-bottom: 5px solid green;
    border-left: 5px solid red;
    border-right: 5px solid blue;
}

到了这一步，你就明白了，我们只需要让红色留下，其他的去掉就可以了，怎么去掉呢。这里提供了透明色transparent。那我是不是可以让所有的边框显示透明色，然后留下设置左侧边框为红色不就行了吗？没错，就是这样。

span {
    display: inline-block;
    width: 0;
    height: 0;
    border: 5px solid transparent;//全部透明色
    border-left: 5px solid red;//让左边的边框变红色
}

四、总结

这就是实现三角的方式，还可以对他进行各种调整。
请添加图片描述

耶啵奶膘

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css案例4——小三角、纯css代码

css小三角
复制链接

扫一扫

专栏目录