如何使用 css 对箭头进行编码

Question

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

Answer 1

箭头本身是由高度和宽度为 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 中它不像在我的浏览器中那样解析。

好吧，你有一个想法和一些可以用一种方法玩的东西

Answer 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>

Answer 3

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

.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>

每个箭头的作用是什么？

对于每个元素，我们都有线和极端 :

对于线条，我们只需要一个纯色的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% 将引用容器的高度。

对于四肢我们需要两个渐变，每个渐变都会创建一个矩形三角形。为此，我只需要指定渐变的对角线方向（例如：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;
}

现在您所要做的就是组合所有这些线性渐变并调整size/position以获得您的布局。

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

.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>

如何使用 css 对箭头进行编码

How to code an arrow using css

css

arrows

css-shapes