css设置三角形

最新推荐文章于 2025-05-14 17:03:41 发布

原创最新推荐文章于 2025-05-14 17:03:41 发布 · 256 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html

html 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何使用CSS创建三角形，通过设置不同边框颜色和宽高为0，实现不同方向的箭头效果。通过调整元素的边框，可以轻松创建上、下、左、右箭头，并通过class属性控制箭头的显示与隐藏，实现更灵活的布局。

1.在开发中，有时候会用到一些小三角形来强调或者标记元素，这样以便区分不同的项目，然后把三角形绘制成一个比较明显的颜色，就达到效果了，那怎么才能画出三角形呢，之前我也不清楚，最近看到了有些网页在使用，在进行标记的时候，都是使用的是背景图片进行标记，这样在网页显示的时候，感觉有点生硬，毕竟图片的加载没有css加载那么顺畅

下面看一段代码：这里设置了一个span 元素为块级元素，分别设置border的四边都为不同的颜色：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 100%;
            margin: 50px 0;
            text-align: center;
        }
        span {
            position: relative;
            margin: 0 auto;
            display: block;
            width: 50px;
            height: 50px;
            border-style: solid;
            border-width: 50px;
            border-top-color: red;
            border-left-color: blue;
            border-bottom-color: yellow;
            border-right-color: black;
        }
    </style>
</head>
<body>
    <div class="as">如何设置三角形?</div>
    <div class="jindaobox">
        <span class="sanjiao">
        </span>
    </div>
</body>
</html>

运行结果：发现四面的边框，居然是这种梯形的结构，如果把梯形上底变为0，不就是我们想要的三角形了么，而且这是使用html 和css做不来的，不存在使用静态页面就可以实行，不存在图片的不连续显示问题；

接下来就是把梯形的上底变为0

在这里插入图片描述

上底变为0 很简单，只要把元素的高和宽设置为0就可以了

width:----->0 得到上下两种箭头

height:------->0 得到左右两种箭头

在这里插入图片描述
1.当我们想要上箭头的时候，就把元素的左右边框和下边框去掉

2.当我们想要下箭头的时候，就把元素的左右边框和上边框去掉

3.当我们想要左箭头的时候，就把上下边框和右边框去掉

4.当我们想要右箭头的时候，就把上下边框和左边框去掉

想法是很好，但是不行，那我们换个方法：既然设置宽度不行，那我们就设置颜色吧，只要把上，左，右边框的颜色设置为透明的，不就可以了么，css 中，刚好有一个设置颜色为透明的值

span {
            position: relative;
            margin: 0 auto;
            display: block;
            width: 0px;
            height: 0px;
            border-style: solid;
            border-width: 50px

            border-top-color: transparent;
            border-left-color: transparent;
            border-right-color: transparent
            border-bottom-color: yellow;
         
        }

在这里插入图片描述

设置下箭头：

span {
            position: relative;
            margin: 0 auto;
            display: block;
            width: 0px;
            height: 0px;
            border-style: solid;
            border-width: 50px;

            border-bottom-color: transparent;
            border-left-color: transparent;
            border-right-color: transparent
            border-top-color: red
        }

在这里插入图片描述

设置左箭头：

span {
            position: relative;
            margin: 0 auto;
            display: block;
            width: 0px;
            height: 0px;
            border-style: solid;
            border-width: 50px;

            border-top-color: transparent;
            border-bottom-color: transparent
            border-right-color: transparent;
            border-left-color: blue;
 
        }

在这里插入图片描述
设置右箭头：

span {
            position: relative;
            margin: 0 auto;
            display: block;
            width: 0px;
            height: 0px;
            border-style: solid;
            border-width: 50px;

            border-top-color: transparent;
            border-bottom-color: transparent;
            border-left-color: transparent;
            border-right-color: black;
        }

在这里插入图片描述
当然，css 还可写在一起，这样看起来要简单一些：

span {
            position: relative;
            margin: 0 auto;
            display: block;
            width: 0px;
            height: 0px;
            /* 先后设置上右下左的border-color属性都是一样的，需要哪个箭头，再设置哪个方向的颜色属性，这样，最后设置的属性覆盖了前面的属性，就变成箭头了 */
            border: 50px solid transparent;
            border-top-color: red;
        }

在这里插入图片描述
以上，是使用html和css两项综合起来设置的箭头，可以不可以再设置简单一点呢？

下面，我采用class 属性来设置箭头，当需要箭头的时候，直接加上这个class 属性就可以，当不想要箭头的时候，去除调这个类就好了

下面来看一个例子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 100%;
            margin: 50px 0;
            text-align: center;
        }

        .jindaobox {
            position: relative;
            width: 980px;
            margin: 20px auto;

        }

        li {
            list-style: none;
            float: left;
            position: relative;
            border: 1px solid #eee;
            margin-right: 30px;
            padding: 10px 20px;
            border-radius: 5px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            -ms-border-radius: 5px;
            -o-border-radius: 5px;
        }

        .active {
            border: 1px solid red !important;

        }

        .active::after {
            position: absolute;
            content: "";
            height: 0;
            width: 0;

            border: 8px solid transparent;
            border-top-color: red;

            top: 0;
            left: 0;
            right: 0;
            margin: auto;
        }
    </style>
</head>

<body>
    <div class="as">请选择你喜欢的电影</div>
    <ul class="jindaobox">
        <li class="lis">飞龙在天</li>
        <li class="lis  active">紫川</li>
        <li class="lis">封神演义</li>
        <li class="lis  active">风云第一刀</li>
        <li class="lis">天外飞仙</li>
    </ul>

</body>

</html>