用css构造两个箭头

Question

我想要尝试使用CSS3完成非常类似于下图（两个箭头）的内容。对于next和prev。

我需要知道的是如何构建上图所示的内容 - 仅限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

Answer 2

如果您希望它们看起来尽可能与您的图像类似，那么您最好使用base64图像。

谷歌类似“image to base64”：http://www.base64-image.de/

上传您的图片并将给定的base64字符串用作background-image。

<style type="text/css">
div.image {
    background-image: url('data:image/png;base64,[...]');
}
</style>

Answer 3

使用列表而不是子弹使用箭头...例如但不在CSS中我确定你可以在CSS中执行此操作。

<ul style="list-style-image: image(ltr 'arrow.png');">
<li dir='ltr'>My bullet is on the left!</li>
<li dir='rtl'>MY BULLET IS ON THE RIGHT!</li>
</ul>

它应该是这样的东西，然后你可以将它们排成一行

⇒ My bullet is on the left!
!THGIR EHT NO SI TELLUB YM ⇐