如何使用 css 编写箭头

【问题标题】：How to code an arrow using css如何使用 css 编写箭头
【发布时间】：2019-05-22 17:40:11
【问题描述】：

大家好，我正在尝试在 css 中编写这样的箭头，我在 codepen 上查看了示例，但现在我在想这是否真的可能？

【问题讨论】：

  • 试试 CSS 三角形作为箭头。
  • 这是可能的，但你最终会以一种你可能不应该的方式使用 CSS。至少在现实世界的项目中不是。在 SVG 中，您可以使用更简洁易懂的代码来完成这种事情，从而获得更好、更灵活的整体结果。

标签： css css-shapes arrows


【解决方案1】：

这是另一个仅使用一个元素和多个线性渐变作为背景的技巧，您可以单独调整每个箭头的大小/位置：

.arrows {
  width:300px;
  height:100px;
  position:relative;
  background:
  /* For the 3 lines*/
  linear-gradient(#000,#000) 10px 25px/2px calc(100% - 30px),
  linear-gradient(#000,#000) 50% 0/2px calc(100% - 2px),
  linear-gradient(#000,#000) calc(100% - 10px) 25px/2px calc(100% - 30px),
  /*for the arrows*/
  linear-gradient(to top left,transparent 50%,#000 0%) 10px 100%/10px 10px,
  linear-gradient(to top right,transparent 50%,#000 0%) 0px 100%/10px 10px,
  
  linear-gradient(to top left,transparent 50%,#000 0%) calc(50% + 5px) 100%/10px 10px,
  linear-gradient(to top right,transparent 50%,#000 0%) calc(50% - 5px) 100%/10px 10px,
  
  linear-gradient(to top left,transparent 50%,#000 0%) 100% 100%/10px 10px,
  linear-gradient(to top right,transparent 50%,#000 0%) calc(100% - 10px) 100%/10px 10px;
  background-repeat:no-repeat;
}
.arrows:before {
  content:"";
  position:absolute;
  top:20px;
  left:10px;
  right:10px;
  height:8px;
  border:2px solid;
  border-bottom:none;
  border-radius:10px 10px 0 0;
  box-sizing:border-box;
}
<div class="arrows"></div>

每个箭头的工作原理是什么？

对于每个元素，我们都有 line 和 extremity：

  1. 对于线条，我们只需要一个纯色的linear-gradient，然后我们调整backround-size 来控制线条：

所以如果我考虑这个线性渐变：

body {
  height: 200px;
  border: 1px solid;
  margin:0;
  background: linear-gradient(#000,#000) 10px 25px/2px calc(100% - 30px) no-repeat;
}

我们可以这样理解：从10px,25px画一条线，粗2px，长度100%减去30px。 100% 指的是容器的高度。

  1. 对于四肢，我们需要两个渐变，每个渐变都会创建一个矩形三角形。为此，我只需指定渐变的对角线方向（例如：to top right）：

所以如果我考虑这个线性渐变：

body {
  height: 200px;
  border: 1px solid;
  margin:0;
  background: linear-gradient(to top right, #000 50%, transparent 0%) 30px 30px/10px 10px no-repeat;
}

我们可以这样理解：从30px,30px开始我的渐变，大小为10px * 10px，并按照右上角方向用黑色填充50%。所以我们最终会得到一个矩形三角形，其左边和底边等于10px。

我们做同样的事情来创建另一个肢体，我们只是让它们彼此靠近以创建最终的视觉效果：

body {
  height: 200px;
  border: 1px solid;
  margin:0;
  background: 
   linear-gradient(to top right, #000 50%, transparent 0%) 30px 30px/10px 10px no-repeat,
   linear-gradient(to top left,  #000 50%, transparent 0%) 20px 30px/10px 10px no-repeat;
}

现在你要做的就是结合所有这些线性渐变并调整大小/位置以获得你的布局。

如果需要，您可以轻松缩放更多箭头，因为您只需要附加更多渐变：

.arrows {
  width:300px;
  height:100px;
  position:relative;
  background:
  /* For the lines*/
  linear-gradient(#000,#000) 10px 25px/2px calc(100% - 50px),
  linear-gradient(#000,#000) 19% 20px/2px calc(100% - 30px),
  linear-gradient(#000,#000) 50% 0/2px calc(100% - 2px),
  linear-gradient(#000,#000) 70% 20px/2px calc(100% - 80px),
  linear-gradient(#000,#000) calc(100% - 10px) 25px/2px calc(100% - 30px),
  linear-gradient(#000,#000) calc(50% + 20px) 60px/ 40px 2px,
  /*for the arrows*/
  linear-gradient(to top left,transparent 50%,#000 0%) 10px calc(100% - 20px)/10px 10px,
  linear-gradient(to top right,transparent 50%,#000 0%) 0px calc(100% - 20px)/10px 10px,
  
  linear-gradient(to top left,transparent 50%,#000 0%) 20% calc(100% - 8px)/10px 10px,
  linear-gradient(to top right,transparent 50%,#000 0%) calc(20% - 10px) calc(100% - 8px)/10px 10px,
  
  linear-gradient(to top left,transparent 50%,#000 0%) calc(50% + 5px) 100%/10px 10px,
  linear-gradient(to top right,transparent 50%,#000 0%) calc(50% - 5px) 100%/10px 10px,
  
  linear-gradient(to top left,transparent 50%,#000 0%) 72% calc(100% - 58px)/10px 10px,
  linear-gradient(to top right,transparent 50%,#000 0%) calc(72% - 10px) calc(100% - 58px)/10px 10px,
  
  linear-gradient(to top left,transparent 50%,#000 0%) 100% 100%/10px 10px,
  linear-gradient(to top right,transparent 50%,#000 0%) calc(100% - 10px) 100%/10px 10px,
  
  linear-gradient(to top left,transparent 50%,#000 0%) calc(50% + 42px) 62px/10px 10px,
  linear-gradient(to bottom left,transparent 50%,#000 0%) calc(50% + 42px) 52px/10px 10px;
 background-repeat:no-repeat;
}
.arrows:before {
  content:"";
  position:absolute;
  top:20px;
  left:10px;
  right:10px;
  height:8px;
  border:2px solid;
  border-bottom:none;
  border-radius:10px 10px 0 0;
  box-sizing:border-box;
}
<div class="arrows"></div>

【讨论】：

  • 哇，太棒了，请问如果我要调整浏览器的大小我将使用@media，我应该编辑什么变量？
  • @GoodJeans 是的，当然 :) .. 对于每个渐变，你都有这样的东西 [ a b/c d ] .. a & b 像 x/y 值一样控制渐变的位置，所以你指定渐变将从哪里开始。 c & d 值控制渐变的大小，因此您可以判断渐变的大小，我可以控制每条线和每个箭头的大小。我建议您只使用一个箭头并通过更改值来进行游戏，看看会发生什么，以便您了解如何修改每个值;)
  • @GoodJeans 为什么你像我一样使用 % 值并且只调整框的大小，因此渐变将跟随这个调整大小
  • @GoodJeans 我用详细的解释编辑了我的答案:)
【解决方案2】：

对于箭头和线条我使用border

.content {
  margin-top: 30px;
  position: relative;
  border: 2px solid black;
  border-bottom: 2px;
  border-radius: 5px;
  width: 200px;
  height: 40px;
}

.content:before,
.content:after,
.center:before {
  content: '';
  width: 0;
  height: 0;
  border-width: 8px 8px;
  border-color: #000 transparent transparent transparent;
  border-style: solid;
  position: absolute;
}

.content:before {
  left: -8px;
  top: 36px;
}

.content:after {
  right: -8px;
  top: 36px;
}

.center:before {
  right: -8px;
  top: 60px;
}

.center {
  position: absolute;
  height: 60px;
  top: -24px;
  left: 50%;
  margin-left:-2px;
  border: 1px solid black;
}
<div class="content">
  <div class="center">
  </div>
</div>

【讨论】：

    【解决方案3】：

    箭头本身是由高度和宽度为 0 的等边块创建的（只有边框构成可见元素）。然后你只显示左边框有一个右箭头，右边框有左箭头等等。

    https://css-tricks.com/snippets/css/css-triangle/

    就添加线而言，块元素的高度为 0，水平线的大小所需的宽度以及垂直线的宽度和所需的高度为 0。

    我继续创建了以下 CSS

        <html>
        <head>
            <title>CSS Arrows</title>
            <style type="text/css">
                .arrow {
                    margin: 5px;
                }

                .arrow_sm {
                    border: 5px solid transparent;
                }

                .arrow_sm p {
                    font-size: 10px;
                    margin-top: -6px;
                }

                .arrow_md {
                    border: 10px solid transparent;
                }

                .arrow_md p {
                    font-size: 20px;
                    margin-top: -12px;
                }

                .arrow_lg {
                    border: 15px solid transparent;
                }

                .arrow_lg p {
                    font-size: 30px;
                    margin-top: -18px;
                }

                .arrow_right {
                    height: 0;
                    border-left-color: blue; 
                }

                .arrow_right {
                    padding-left: 2px;
                }

                .arrow_down {
                    width: 0;
                    border-top-color: red; 
                }

                .arrow_down p {
                    padding-top: 2px;
                    padding-bottom: 2px;
                    transform: rotate(90deg);
                    transform-origin: middle top 0;
                }

                .arrow_left {
                    height: 0;
                    text-align: right;
                    border-right-color: green; 
                }

                .arrow_left p {
                    text-align: right;
                    padding-right: 2px;
                }

                .arrow_up {
                    width: 0;
                    border-bottom-color: black; 
                }

                .arrow_up p {
                    margin: 0 0 -.4em -.2em;
                    transform: rotate(-90deg);
                    transform-origin: middle bottom 0;
                }

                .vertical_line {
                    width: 2px;
                }

                .horizontal_line {
                    height: 2px;
                }

                .line_v_sm {
                    height: 30px;
                    border-left: 2px solid green;
                }

                .line_v_md {
                    height: 45px;
                    border-left: 2px solid red;
                }

                .line_v_lg {
                    height: 60px;
                    border-left: 2px solid black;
                }

                .line_h_sm {
                    width: 30px;
                    border-top: 2px solid green;
                }

                .line_h_md {
                    width: 45px;
                    border-top: 2px solid red;
                }

                .line_h_lg {
                    width: 60px;
                    border-top: 2px solid black;
                }

                .inline {
                    display: inline-block;
                }

                .vertical_stem_sm {
                    margin-top: -.5em;
                    margin-left: .6em;
                    margin-bottom: -.5em;
                }

                .vertical_stem_md {
                    margin-top: -.8em;
                    margin-left: .9em;
                    margin-bottom: -.8em;
                }

                .vertical_stem_lg {
                    margin-top: -1.1em;
                    margin-left: 1.2em;
                    margin-bottom: -1.1em;
                }

                .horizontal_stem_sm {
                    margin-left: -.6em;
                    margin-right: -.6em;
                }

                .horizontal_stem_md {
                    margin-top: -7px;
                    margin-left: -.6em;
                    margin-right: -.6em;
                }

                .horizontal_stem_lg {
                    margin-top: -12px;
                    margin-left: -.6em;
                    margin-right: -.6em;
                }
            </style>
        </head>
        <body>
            <!-- arrow arrow_size arrow_direction //-->
            <div class="arrow arrow_sm arrow_right"><p>Right</p></div>
            <div class="arrow arrow_md arrow_right"><p>Right</p></div>
            <div class="arrow arrow_lg arrow_right"><p>Right</p></div>

            <div class="arrow arrow_sm arrow_down"><p>Down</p></div>
            <div class="arrow arrow_md arrow_down"><p>Down</p></div>
            <div class="arrow arrow_lg arrow_down"><p>Down</p></div>

            <div class="arrow arrow_sm arrow_left"><p>Left</p></div>
            <div class="arrow arrow_md arrow_left"><p>Left</p></div>
            <div class="arrow arrow_lg arrow_left"><p>Left</p></div>

            <div class="arrow arrow_sm arrow_up"><p>Up</p></div>
            <div class="arrow arrow_md arrow_up"><p>Up</p></div>
            <div class="arrow arrow_lg arrow_up"><p>Up</p></div>


            <div class="arrow arrow_sm arrow_right"></div>
            <div class="arrow arrow_md arrow_right"></div>
            <div class="arrow arrow_lg arrow_right"></div>

            <div class="arrow arrow_sm arrow_down"></div>
            <div class="arrow arrow_md arrow_down"></div>
            <div class="arrow arrow_lg arrow_down"></div>

            <div class="arrow arrow_sm arrow_left"></div>
            <div class="arrow arrow_md arrow_left"></div>
            <div class="arrow arrow_lg arrow_left"></div>

            <div class="arrow arrow_sm arrow_up"></div>
            <div class="arrow arrow_md arrow_up"></div>
            <div class="arrow arrow_lg arrow_up"></div>

            <div class="vertical_line line_v_sm"></div>
            <div class="vertical_line line_v_md"></div>
            <div class="vertical_line line_v_lg"></div>

            <div class="horizontal_line line_h_sm"></div>
            <div class="horizontal_line line_h_md"></div>
            <div class="horizontal_line line_h_lg"></div>

            <!-- Small arrow and stem for small arrow //-->
            <div style="margin-left: 70px;">
                <div class="arrow arrow_sm arrow_up"><p>Up</p></div>
                <div class="vertical_line line_v_lg vertical_stem_sm"></div>
            </div>

            <div class="arrow arrow_sm arrow_left inline"><p>Left</p></div>
            <div class="horizontal_line line_h_lg inline horizontal_stem_sm"></div>

            <div class="horizontal_line line_h_lg inline horizontal_stem_sm"></div>
            <div class="arrow arrow_sm arrow_right inline"><p>Right</p></div>
            <div style="margin-left: 70px;">
                <div class="vertical_line line_v_lg vertical_stem_sm"></div>
                <div class="arrow arrow_sm arrow_down"><p>Down</p></div>
            </div>

            <!-- Medium arrow and stem for medium arrow //-->
            <div style="margin-left: 90px;">
                <div class="arrow arrow_md arrow_up"><p>Up</p></div>
                <div class="vertical_line line_v_lg vertical_stem_md"></div>
            </div>

            <div class="arrow arrow_md arrow_left inline"><p>Left</p></div>
            <div class="horizontal_line line_h_lg inline horizontal_stem_md"></div>

            <div class="horizontal_line line_h_lg inline horizontal_stem_md"></div>
            <div class="arrow arrow_md arrow_right inline"><p>Right</p></div>
            <div style="margin-left: 90px;">
                <div class="vertical_line line_v_lg vertical_stem_md"></div>
                <div class="arrow arrow_md arrow_down"><p>Down</p></div>
            </div>

            <!-- Large arrow and stem for large arrow //-->
            <div style="margin-left: 120px;">
                <div class="arrow arrow_lg arrow_up"><p>Up</p></div>
                <div class="vertical_line line_v_lg vertical_stem_lg"></div>
            </div>

            <div class="arrow arrow_lg arrow_left inline"><p>Left</p></div>
            <div class="horizontal_line line_h_lg inline horizontal_stem_lg"></div>

            <div class="horizontal_line line_h_lg inline horizontal_stem_lg"></div>
            <div class="arrow arrow_lg arrow_right inline"><p>Right</p></div>
            <div style="margin-left: 120px;">
                <div class="vertical_line line_v_lg vertical_stem_lg"></div>
                <div class="arrow arrow_lg arrow_down"><p>Down</p></div>
            </div>
        </body>
    </html>

    https://jsfiddle.net/2ykpwwgt/1/

    由于某些原因，在 JSFiddle 中它不像在我的浏览器中那样解析。

    嗯，你有一个想法和一些东西可以用一种方法来玩

    【讨论】：

      猜你喜欢
      • 2016-12-05
      • 1970-01-01
      • 2014-07-31
      • 1970-01-01
      • 2013-08-29
      • 2015-02-14
      • 2017-03-23
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode