html - 用css构造两个箭头

Question

我想尝试仅使用 CSS3 完成与下图(两个箭头)非常非常相似的事情。下一个和上一个。

我需要知道的是如何构建上图中显示的内容——仅使用 CSS3？

Answer 1

HTML:

<div class="arrow">
    <div class="triangle-left"></div>
    <div class="tail left-arrow"></div>
</div>

<div class="arrow">
    <div class="triangle-right"></div>
    <div class="tail right-arrow"></div>
</div>

CSS:

.arrow { position:relative; width: 130px; }
.triangle-left {
    border-color: transparent green transparent transparent;
    border-style: solid;
    border-width: 20px;
    width: 0;
    height: 0;
        float: left;
}
.triangle-right {
    border-color: transparent transparent transparent green;
    border-style: solid;
    border-width: 20px;
    width: 0;
    height: 0;
        float: right;
}
.tail { width: 20px; height: 10px; position: absolute; background-color: green }
.tail.left-arrow { left: 40px; top: 15px }
.tail.right-arrow { right: 40px; top: 15px }

SEE DEMO