CSSを使用して派手な矢を作る方法？

102

わかりましたので、これを使用して三角形を作成できることを誰もが知っています：

#triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

そして、それは三角形で塗りつぶされた固体を生成します。しかし、このように中空の矢印のような三角形をどのように作成しますか？

ポイントで交差する2本の線だけの矢印。 大なり記号のように：>

html  css  css-shapes 
— トンメイ
ソース
3
2つの回転した長方形。
— 2014
51
— j08691 2014
5
非常に大きなフォントを使用していますか？
— GolezTrol 2014
2
AAAAAHHHH。j08691はそれを手に入れました。ありがとう！
— Tommay、2014
4
@ j08691をチェックして、お金の権利を調整してください。これを実現する別の方法は、Awesome Fonts fortawesome.github.io/Font-Awesome/icon/chevron-rightの
— crazymatt

回答:

93

beforeまたはafter疑似要素を使用して、CSSを適用できます。いろいろな方法があります。beforeとの両方を追加しafter、それぞれを回転および配置して、バーの1つを形成できます。より簡単な解決策は、before要素に2つの境界線を追加し、を使用してそれを回転させることtransform: rotateです。

下にスクロールして、pseuso要素の代わりに実際の要素を使用する別のソリューションを探します

この場合、矢印を箇条書きとしてリストに追加し、emサイズを使用して、リストのフォントで矢印を適切にサイズ設定しました。

ul {
    list-style: none;
}

ul.big {
    list-style: none;
    font-size: 300%
}

li::before {
    position: relative;
    /* top: 3pt; Uncomment this to lower the icons as requested in comments*/
    content: "";
    display: inline-block;
    /* By using an em scale, the arrows will size with the font */
    width: 0.4em;
    height: 0.4em;
    border-right: 0.2em solid black;
    border-top: 0.2em solid black;
    transform: rotate(45deg);
    margin-right: 0.5em;
}

/* Change color */
li:hover {
  color: red; /* For the text */
}
li:hover::before {
  border-color: red; /* For the arrow (which is a border) */
}
<ul>
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
    <li>Item4</li>
</ul>

<ul class="big">
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
    <li>Item4</li>
</ul>
スニペットを展開

もちろん、beforeまたはを使用する必要はありませんafter。通常の要素にも同じトリックを適用できます。上記のリストの場合、追加のマークアップは必要ないので便利です。ただし、とにかくマークアップが必要な場合があります。divまたはspanを使用できますi。「アイコン」の要素をリサイクルする人まで見たこともあります。したがって、そのマークアップは次のようになります。<i>これに使用することが正しいかどうかは議論の余地がありますが、安全のためにこれにスパンを使用することもできます。

/* Default icon formatting */
i {
  display: inline-block;
  font-style: normal;
  position: relative;
}

/* Additional formatting for arrow icon */
i.arrow {
    /* top: 2pt; Uncomment this to lower the icons as requested in comments*/
    width: 0.4em;
    height: 0.4em;
    border-right: 0.2em solid black;
    border-top: 0.2em solid black;
    transform: rotate(45deg);
}
And so you can have an <i class="arrow" title="arrow icon"></i> in your text.
This arrow is <i class="arrow" title="arrow icon"></i> used to be deliberately lowered slightly on request.
I removed that for the general public <i class="arrow" title="arrow icon"></i> but you can uncomment the line with 'top' <i class="arrow" title="arrow icon"></i> to restore that effect.
スニペットを展開

もっとインスピレーションを求めている場合は、ニコラスギャラガーによる純粋なCSSアイコンのこの素晴らしいライブラリをチェックしてください。:)

— GolezTrol
ソース
これはかなりうまくいきましたが、修正が必要なことがいくつかあります。1.残りのテキストを一緒に移動せずに、矢印を少し下に移動するにはどうすればよいですか？#arrow :: afterを試してからマージントップを設定しましたが、テキストを含めてすべてが下に移動しました。2.マウスオーバーで色を変更する必要があります。現時点では、テキストのみの色が変わります。テキストと矢印の両方を変更するにはどうすればよいですか？
— Tommay
border-color矢印は実際には文字ではなく境界なので、矢印の色を変更するには、を変更する必要があります。位置決めのために、あなたは追加することができますposition: relative矢印にして使用して、それを周りに移動topしてleft。変更された最初のスニペットと、2番目のスニペットの配置の両方で示しました。ホバーされたリストアイテムの疑似要素li:hover::beforeを参照する素晴らしい組み合わせに注意してくださいbefore。
— GolezTrol 2014
実際、もう1つあります。つまり、このテキストを中央に配置しようとしています（after要素を使用）。問題は、このafter要素が目に見えない多くのスペースを占めているため、テキストが極端に中心から外れているように見えることです。その不可視スペースを0に設定するにはどうすればよいですか？左：0、右：0、マージン-左：0、マージン-右：0を試しましたが、どちらも機能しませんでした。
— Tommay、2014
私はあなたが何を意味するのか正確にはわかりませんが、疑似要素にはすでに0それ自体のマージンがあるため、空白をキャンセルするには負のマージンが必要になります。たとえば、2番目のスニペットではmargin-left: -0.4em;、前の単語の横にスペースを入れずに矢印を追加することができます。
— GolezTrol 2014
— Tommay
71

これは、他の提案よりもはるかに簡単に解決できます。

単に正方形を描き、border結合する2辺だけにプロパティを適用します。

次に、例として、矢印が指す方向に従って正方形を回転させます。 transform: rotate(<your degree here>)

.triangle {
    border-right: 10px solid; 
    border-bottom: 10px solid;
    height: 30px;
    width: 30px;
    transform: rotate(-45deg);
}
<div class="triangle"></div>
スニペットを展開

— アラン・ダニング
ソース
1
これは完璧な答えです。本当に受け入れられる必要があります。非常にシンプルで、あらゆる点で効果的です。
— Andrew Faulkner、
@AndrewFaulkner助けてくれて嬉しいです。
— アランダニング
38

レスポンシブシェブロン/矢印

彼らは、サイズを変更あなたと自動的にテキストとされている色と同じ色を。プラグアンドプレイ:)
jsBinデモプレイグラウンド

ここに画像の説明を入力してください

body{
  font-size: 25px; /* Change font and  see the magic! */
  color: #f07;     /* Change color and see the magic! */
} 

/* RESPONSIVE ARROWS */
[class^=arr-]{
  border:       solid currentColor;
  border-width: 0 .2em .2em 0;
  display:      inline-block;
  padding:      .20em;
}
.arr-right {transform:rotate(-45deg);  -webkit-transform:rotate(-45deg);}
.arr-left  {transform:rotate(135deg);  -webkit-transform:rotate(135deg);}
.arr-up    {transform:rotate(-135deg); -webkit-transform:rotate(-135deg);}
.arr-down  {transform:rotate(45deg);   -webkit-transform:rotate(45deg);}
This is <i class="arr-right"></i> .arr-right<br>
This is <i class="arr-left"></i> .arr-left<br>
This is <i class="arr-up"></i> .arr-up<br>
This is <i class="arr-down"></i> .arr-down
スニペットを展開

— ロコ・C・ブルジャン
ソース
1
うわー、そのシンボルは実際には「右上」と呼ばれています！いいね。:)ボーダーよりも幅の制御が少ないですが、フォントの可能性を示すために+1します。他のシンボルの場合、これはCSSシェイプトリックよりも優れている場合があります。
— GolezTrol 2014
ユーザーがフォントを持っていない場合、フォントアイコンはうまく機能しないことに注意してください。そのため、ほとんどのシステムで使用できるフォントに適切にフォールバックする必要があります。CSS経由でフォントをダウンロードすることもできますが、いくつかのアイコンをダウンロードするのは帯域幅の浪費です。ただし、多くのアイコンがある場合、または独自のスタイルでそれらを使用したい場合は、それらすべてを独自のアイコンフォントに追加し、CSS経由でロードすることを選択できます。こうすることで、ほんの一握りのシンボル用の巨大なフォントをダウンロードしなくても、正しいフォントを確実に利用できるようになります。
— GolezTrol 2014
HTML 4.0に戻って、38887文字を保持する合計セットが採用されました。以来、v. 6.2.0 September 2012 1UnicodeのUTF-8文字は110182への上昇を設定して、今すぐHTML5とデフォルトのUTF-8を有し、かつ、当社の文字が格好良いさになります。unicode.org/Public/UNIDATA/UnicodeData.txt
— ロコC. Buljan
キャラクターが存在するからといって、表示できるわけではありません。それを表示するには、適切なフォントが必要です。これが、回答の最初のバージョンの文字が失敗した理由です。ブラウザのデフォルトフォントにそれらの文字が含まれていないためです。したがって、このような文字を使用するには、使用するフォントを指定する必要があります。また、すべてのプラットフォームで使用できない場合は、他のフォントへの適切なフォールバックを提供する必要があります。たとえば、\231dキャラクターはここで利用できますが、MacまたはAndroidデバイスでは利用できない場合があります。HTMLバージョンと応答エンコーディングは、それとは関係ありません。
— GolezTrol 2014
薄くできますか？太っているのではなく？font-weightを変更しても何も起こりません。
— James111 2016年
14

ここに別のアプローチがあります：

1）乗算文字を使用：&times;×

2）半分を隠す overflow:hidden

3）次に、チップの疑似要素として三角形を追加します。

ここでの利点は、変換が必要ないことです。（IE8 +で動作します）

FIDDLE

.arrow {
  position: relative;
}
.arrow:before {
  content: '×';
  display: inline-block;
  position: absolute;
  font-size: 240px;
  font-weight: bold;
  font-family: verdana;
  width: 103px;
  height: 151px;
  overflow: hidden;
  line-height: 117px;
}
.arrow:after {
  content: '';
  display: inline-block;
  position: absolute;
  left: 101px;
  top: 51px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 25px 0 25px 24px;
  border-color: transparent transparent transparent black;
}
<div class="arrow"></div>
スニペットを展開

— ダニエル
ソース
2
Internet Explorer、Chrome、Firefoxで動作します。
— Thomas
11

ただ、使用前と後の 擬似要素- CSS 

*{box-sizing: border-box; padding: 0; margin: 0}
:root{background: white; transition: background .3s ease-in-out}
:root:hover{background: red }
div{
  margin: 20px auto;
  width: 150px;
  height: 150px;
  position:relative
}

div:before, div:after{
  content: '';
  position: absolute;
  width: 75px;
  height: 20px;
  background: black;
  left: 40px
}

div:before{
  top: 45px;
  transform: rotateZ(45deg)
}

div:after{
  bottom: 45px;
  transform: rotateZ(-45deg)
}
<div/>
スニペットを展開

— Gildas.Tambo
ソース
8

境界線を使用し、CSS3プロパティを使用しない別の方法：

div, div:after{
    border-width: 80px 0 80px 80px;
    border-color: transparent transparent transparent #000;
    border-style:solid;
    position:relative;
}
div:after{
    content:'';
    position:absolute;
    left:-115px; top:-80px;
    border-left-color:#fff;
}
<div></div>
スニペットを展開

— ウェブティキ
ソース
4

>それ自体はとても素晴らしい矢です！divの前に付加してスタイルを設定するだけです。

div{
  font-size:50px;
}
div::before{
  content:">";
  font: 50px 'Consolas';
  font-weight:900;
}
<div class="arrowed">Hatz!</div>
スニペットを展開

— ニカエル
ソース
2
これは、矢印ではなく「より大」の記号です。
— Mark Knol 2015年
@MarkKnolこれと他の皆の矢がどう違うのか？これは私にとってまだ最良の解決策のようです。
— ダリン
2

ロコC.ブルジャンのボックスシャドウトリックを使用したホバー効果のある左右矢印

.arr {
  display: inline-block;
  padding: 1.2em;
  box-shadow: 8px 8px 0 2px #777 inset;
}
.arr.left {
  transform: rotate(-45deg);
}
.arr.right {
  transform: rotate(135deg);
}
.arr:hover {
  box-shadow: 8px 8px 0 2px #000 inset
}
<div class="arr left"></div>
<div class="arr right"></div>
スニペットを展開

— ビナヤク
ソース
1

inputプロジェクトでを矢印に変更する必要がありました。以下が最終作業です。

#in_submit {
  background-color: white;
  border-left: #B4C8E9;
  border-top: #B4C8E9;
  border-right: 3px solid black;
  border-bottom: 3px solid black;
  width: 15px;
  height: 15px;
  transform: rotate(-45deg);
  margin-top: 4px;
  margin-left: 4px;
  position: absolute;
  cursor: pointer;
}
<input id="in_submit" type="button" class="convert_btn">
スニペットを展開

ここフィドル

— モスタファ
ソース
素晴らしいコード！それは行うのが難しい要素を1つだけ使用します:)
— www139
0 

.arrow {
  display : inline-block;
  font-size: 10px; /* adjust size */
  line-height: 1em; /* adjust vertical positioning */
  border: 3px solid #000000;
  border-left: transparent;
  border-bottom: transparent;
  width: 1em; /* use font-size to change overall size */
  height: 1em; /* use font-size to change overall size */
}

.arrow:before {
  content: "\00a0"; /* needed to hook line-height to "something" */
}

.arrow.left {
  margin-left: 0.5em;
  -webkit-transform: rotate(225deg);
  -moz-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  transform: rotate(225deg);
}

.arrow.right {
  margin-right: 0.5em;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.arrow.top {
  line-height: 0.5em; /* use this to adjust vertical positioning */
  margin-left: 0.5em;
  margin-right: 0.5em;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.arrow.bottom {
  line-height: 2em;
  /* use this to adjust vertical positioning */
  margin-left: 0.5em;
  margin-right: 0.5em;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
}
<div>
  here are some arrows
  <div class='arrow left'></div> space
  <div class='arrow right'></div> space
  <div class='arrow top'></div> space
  <div class='arrow bottom'></div> space with proper spacing?
</div>
スニペットを展開

Roko Cに似ていますが、サイズと配置をもう少し制御します。

— ボブ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.