CSS实现不同的箭头效果

最新推荐文章于 2023-01-07 18:32:00 发布

中南滴水哥

最新推荐文章于 2023-01-07 18:32:00 发布

阅读量1.1k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43742385/article/details/109688198

版权

css html 前端 css3 html5

前端专栏收录该内容

54 篇文章 2 订阅

订阅专栏

以前需要用到箭头时，要么用的箭头图片，要么用的CSS代码生成器来做的。这次想用CSS来手写一个上下左右的箭头效果，并且如果明白里面的具体原理，可以做出更牛逼的效果。

引入：

在我们平时使用border时,一般都是内容宽有内容的，也就是说内容区的width和height不为0，然后效果一般为这样：

在这里插入图片描述
对应的代码：
这是内容区有内容的情况，那我们想一下，要是内容区为0，border会是怎样呢。
结果如下：

对应代码：
HTML：

<div class="container"></div>

CSS

.container{
        width: 0px;
        height: 0px;
        border: 60px solid;
        border-color: red yellow green blue;
    }

由于内容为0，所有border只有从两边向中间聚拢才能不破坏内容区为0 ，那么这样理所应当的形成了三角形。同时，三角形的高也就是我们为这个container设置的border的宽度。

那么如果我们要形成指向一个方向的三角形，我们只需要将其他三个面设置为透明就行了。

例如右箭头:
在这里插入图片描述
HTML

<div class="right">右</div>

CSS：

.right{
        width: 0px;
        height: 0px;
        border: 60px solid;
        border-color: transparent transparent transparent blue;
    }

三角形的高就是border-width
在这里插入图片描述
本案例完整代码：

<!--
 * @Author: CSU_XZY
 * @Date: 2020-11-14 10:45:40
 * @LastEditors: CSU_XZY
 * @LastEditTime: 2020-11-14 11:16:23
 * @FilePath: \第二天c:\Users\XZY\Desktop\前端\CSS\箭头\arrow.html
 * @Description: just to play
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }
    .container{
        width: 0px;
        height: 0px;
        border: 60px solid;
        border-color: red yellow green blue;
    }
    .box{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
    }
    .box div{
        margin: auto 20px;
    }
    .left{
        width: 0px;
        height: 0px;
        border: 60px solid;
        border-color: transparent yellow transparent transparent;
        
    }
    .right{
        width: 0px;
        height: 0px;
        border: 60px solid;
        border-color: transparent transparent transparent blue;
    }
    .top{
        width: 0px;
        height: 0px;
        border: 60px solid;
        border-color: transparent transparent green transparent;
        
    }
    .bottom{
        width: 0px;
        height: 0px;
        border: 60px solid;
        border-color: red transparent transparent transparent;
    }
    span{
        display: none;
    }
    .test{
        width: 100px;
        height: 100px;
        border:2px solid green;
        margin-right: 30px;
    }
</style>
<body>
    <div class="test"></div>
    <div class="container"></div>
    <div class="box">
        <span>左</span><div class="left">左</div>
        <span>右</span><div class="right">右</div>
        <span>上</span><div class="top">上</div>
        <span>下</span><div class="bottom">下</div>
    </div>
</body>
</html>

结果截图：
在这里插入图片描述

中南滴水哥

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS实现不同的箭头效果

以前需要用到箭头时，要么用的箭头图片，要么用的CSS代码生成器来做的。这次想用CSS来手写一个上下左右的箭头效果，并且如果明白里面的具体原理，可以做出更牛逼的效果。引入：在我们平时使用border时,一般都是内容宽有内容的，也就是说内容区的width和height不为0，然后效果一般为这样：对应的代码：这是内容区有内容的情况，那我们想一下，要是内容区为0，border会是怎样呢。结果如下：对应代码：HTML：<div class="container"></div&
复制链接

扫一扫