html - css で 2 つの矢印を作成する

Question

CSS3 のみを使用して、下の図 (2 つの矢印) に非常によく似たものを実現したいと考えています。次と前のため。

私が知る必要があるのは、上の図に示されているものをどのように構築するかということです -- 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 }

デモを見る

Answer 2

与えられた画像にできるだけ似せて表示したい場合は、おそらく base64 画像を使用するのが最善です。

「base64 へのイメージ」のような Google の何か: 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>

このようなものでなければなりません。それらを1行に並べることができます

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