问题描述
我试图生成一条直线水平线，在中间显示一个箭头。想法是，显示在行下的内容将提供关于在行上显示的内容的详细信息。下面是该行应该是什么样子：
I am trying to generate a straight horizontal line with a breakdown in the middle to display an arrow. The idea is that the content displayed under the line will provide details about the content displayed above the line. Here is what the line should look like:
我试图用纯HTML和CSS（没有位图图像）生成。如果最终产生正确的结果，则可以使用。我需要控制线的厚度和颜色。击穿的角度无关紧要（上图所示的样品为45和90度）。我知道这个，但我不能想
I am trying to generate this with pure HTML and CSS (no bitmap images). Use of Font Awesome is acceptable if it ends up producing the right result. I need control over the line's thickness and color. The angle of the breakdown does not matter (45 and 90 degrees on the sample shown above). I am aware of this CSS triangle trick, but I can't think of a way to apply it to this scenario.
推荐答案
这个很好的效果可以使用CSS ：之前和：之后属性。最好在上与SimonHøjberg的在线生成器一起玩。
This nice effect can be achieved using the CSS :before and :after properties. It's best to play around with Simon Højberg's online generator at cssarrowplease.
这篇关于使用CSS生成箭头线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！