0

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

在此处输入图像描述

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

4

3 回答 3

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 }

看演示

于 2013-01-23T13:12:39.233 回答
1

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

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

上传您的图片并使用给定的 base64 字符串作为background-image.

<style type="text/css">
div.image {
    background-image: url('data:image/png;base64,[...]');
}
</style>
于 2013-01-23T13:35:28.383 回答
-1

使用列表而不是项目符号使用箭头...例如，但不是在 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 ⇐
于 2013-01-23T13:17:33.357 回答