CSS でシェブロン (三角形ではない) を作成する方法を検討しています。>基本的にやのようなアイコンを作成します<。
このサイト: http://css-tricks.com/examples/ShapesOfCSS/の下部にシェブロンがあります。ただし下向きです。どうすれば右向き、左向きにすることができるのだろうと思っていました。角度をいじってみましたが、とにかくこれらのものがどのように作成されているのかよくわからないので、わかりませんでした.
余談ですが、これは d3 などの描画ライブラリで作成する必要がありますか、それとも div を使用するだけですか? 私は基本的にこのシェブロンを使用して、画面上の要素を視覚的に分離しようとしています。
結果を変更するには、例の注意事項に従ってください。
変更できるパラメータ:
.chevron {
position:relative;
display:block;
height:50px; /*Height should be double border thickness*/
}
.chevron::before,
.chevron::after {
position:absolute;
display:block;
content:"";
border:25px solid transparent; /*Adjust chevron size*/
}
/*Change the four instances of 'top' below to rotate chevron*/
/*Use (top/right/bottom/left) where you want the back of the chevron to be*/
.chevron::before {
top:0;
border-top-color:#b00; /*Chevron Color*/
}
.chevron::after {
top:-10px; /*Adjust thickness*/
border-top-color:#fff; /*Match chevron background colour*/
}<i class="chevron"></i>p:before { content:"\2039"; }
p:after { content:"\203A"; }
この特定の例の別の解決策 (山形文字コードを回転させたり使用したりすることはありません)
CSS でシェブロンを作成する他の 2 つの方法を次に示します。これらは変換や回転を使用しないため、IE8+ と互換性がありますが、注意点として、シェブロンの色とシェブロンが置かれている背景の色を設定する必要があります。
.chevron {
display:inline-block;
width: .5em;
height: .8em;
position:relative;
}
.chevron:before,
.chevron:after {
display:block;
content:"";
width:0;
height:0em;
border-style:solid;
position:absolute;
}
.chevron:before {
right:0;
border-width:.4em 0 .4em .4em;
border-color:transparent transparent transparent red;
}
.chevron:after {
left:0;
border-width:.4em 0 .4em .4em;
border-color:transparent transparent transparent #fff;
}
.chevron.skinny {
width:.4em;
}
.chevron.fat {
width:.6em;
}
.chevron {
display:inline-block;
background:red;
width: .55em;
height: .75em;
position:relative;
}
.chevron:before,
.chevron:after {
display:inline-block;
content:"";
width:0;
height:0em;
border-style:solid;
position:absolute;
}
.chevron:before {
left:0;
border-width:.4em 0 .4em .4em;
border-color:transparent transparent transparent #fff;
}
.chevron:after {
right:0;
border-width:.4em 0 .4em .4em;
border-color:#fff transparent;
}
.chevron.skinny {
width:.4em;
}
.chevron.fat {
width:.7em;
}
以下は、右シェブロンの単純な CSS 実装です。:after 疑似要素の両側に境界線を作成し、rotate() 関数を使用して負の 45 度に回転させています。
.container:after {
content: ' ';
display: inline-block;
border-bottom: 1px solid #f00;
border-right: 1px solid #f00;
height: 10px;
width: 10px;
transform: rotate(-45deg);
}<div class="container"></div>CSS グリフ⟩ , ⟨
http://css-tricks.com/snippets/html/glyphs/を使用できます
CSS3 を使用せず、境界線を使用して昔ながらの方法で行う:
.chevron {
display: inline-block;
vertical-align: middle;
}
.chevron:before,
.chevron:after {
content: '';
display: block;
overflow: hidden;
height: 0;
width: 0;
border: solid black 20px;
}
.chevron.up:before,
.chevron.up:after {
border-bottom-width: 12px;
border-top-width: 0;
}
.chevron.up:before,
.chevron.down:after {
border-left-color: transparent;
border-right-color: transparent;
}
.chevron.up:after {
border-top-width: 7px;
border-bottom-color: transparent;
}
.chevron.down:before,
.chevron.down:after {
border-top-width: 12px;
border-bottom-width: 0;
}
.chevron.down:before {
border-bottom-width: 7px;
border-top-color: transparent;
}
.chevron.left:before,
.chevron.left:after,
.chevron.right:before,
.chevron.right:after {
display: inline-block;
}
.chevron.left:before,
.chevron.left:after {
border-right-width: 12px;
border-left-width: 0;
}
.chevron.left:before,
.chevron.right:after {
border-top-color: transparent;
border-bottom-color: transparent;
}
.chevron.left:after {
border-left-width: 7px;
border-right-color: transparent;
}
.chevron.right:before,
.chevron.right:after {
border-left-width: 12px;
border-right-width: 0;
}
.chevron.right:before {
border-right-width: 7px;
border-left-color: transparent;
}<span class="chevron down"></span>
<span class="chevron up"></span>
<span class="chevron right"></span>
<span class="chevron left"></span>IDを繰り返さずにシェブロンを再利用できるようにする必要がありました。. .だからここに私が思いついたものがあります（Yennに感謝します）。(アプリには小さなシェブロンが必要です)。
ID タグの代わりにクラスを使用し、カスケード クラスを使用して左に反転します。. . 私のCSSコードを2倍にする代わりに。
.chevron {
position: relative;
padding: 0px;
height:17px;
width: 6px;
margin-left:0px;
margin-top:0px;
}
.chevron:before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 50%;
width: 100%;
background: gray;
-webkit-transform: skew(25deg, 0deg);
-moz-transform: skew(25deg, 0deg);
-ms-transform: skew(25deg, 0deg);
-o-transform: skew(25deg, 0deg);
transform: skew(25deg, 0deg);
}
.chevron:after {
content: '';
position: absolute;
top: 50%;
right: 0;
height: 50%;
width: 100%;
background: gray;
-webkit-transform: skew(-25deg, 0deg);
-moz-transform: skew(-25deg, 0deg);
-ms-transform: skew(-25deg, 0deg);
-o-transform: skew(-25deg, 0deg);
transform: skew(-25deg, 0deg);
}
.rotate180
{
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}