CSS实现不同的箭头效果

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

引入:

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

CSS实现不同的箭头效果_第1张图片
对应的代码:CSS实现不同的箭头效果_第2张图片
这是内容区有内容的情况,那我们想一下,要是内容区为0,border会是怎样呢。
结果如下:
CSS实现不同的箭头效果_第3张图片
对应代码:
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的宽度。

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

例如右箭头:
CSS实现不同的箭头效果_第4张图片
HTML

<div class="right">div>

CSS:

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

三角形的高就是border-width
CSS实现不同的箭头效果_第5张图片
本案例完整代码:



<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
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>

结果截图:
CSS实现不同的箭头效果_第6张图片

你可能感兴趣的:(前端,css,html,前端,css3,html5)