フロントエンドのヒント、純粋な CSS3_html/css_WEB-ITnose を使用して全方向に小さな三角形を作成する原則

これは、ブログパークで 2 か月経ってからの私の最初のエッセイです。次の 3 つの原則を達成したいと考えています。

1 つ: 自分の時間を無駄にしないでください。 ,

いいえ、第三に、私にアドバイスをくれる運命にある友人がフロントエンドの喜びを共有できることを願っています。 ！ ！

今日は、フロントエンドのベテランの知恵と蓄積された文化を示しながら、帰省に欠かせないヒントをいくつかご紹介します...

ちょっとしたヒントから始めましょう [後で必要になります、いいえぜひ覚えておいてください】

直角三角形（上下左右）

角がとがった逆四角線に色を付ける/*エッジを設定*/

両側に角のラインを作る透明 /*エッジを設定します* /

パラメータはすべて同じです /*線のパラメータは同じです*/

3つの辺を与えます /*3つの辺があります*/

8つ-辺の小さな三角形 (左上、左下、右上、右下)

左右を反転して透明にする /*エッジを設定*/

上下同じ色 /*エッジを設定*/

2 つのエッジを与えてください /*とても便利です、エッジが 2 つだけです*/

お兄さん、次のようにコーディングしてください: 梨を

あらゆる方向から来て

(上、上、上) を作成してください他のコンテナを使用できますか? (試したことはありませんが、これで十分だと思います)

<div class="up"><div/>

.up{	position: absolute;;  /*这里咱可以视情况而定*/	border-left:30px solid transparent;  /*口诀，左，右边成透明*/        border-right:30px solid transparent;  /*30px可以控制三角的大小*/        border-bottom:30px solid black;  /*口诀，相反线，给颜色*/	width: 0;	height: 0; /*是否加上宽高0，自己试验哦，博主试过可以不加*/}

結果は次のようになります (小さなマウスは無視します)

ブラザーコード(2)

まず公式を確認して、上へ上へ…

それからもう一度来て、梨を持ち上げてください(「左上、左上、左上左上」を全方向から)

<div class="left-top"><div/>

.left-top{	position: relative;	border-top: 30px solid lawngreen;  /*发现没有上下相同，设置颜色*/<br />        border-right: 30px solid transparent; /*左右相反，给透明*/        width: 0;      /*只有两条边的设置哦*/  	height: 0;}

レンダリング: (完璧!!)

主な利点は、ソース コードを覚える必要がないことです。 css を作成し、それを Web ページ上で完璧に表示すると、「これは 2 倍良い、2 倍良い...」

主な用途:

「ナビゲーション バーの小さな三角形が指す」他に何も見つかりませんでした、ハハ...」

シャオバイ同志がそれを見たら、この記事を書いているときに、私に連絡してください。新人がシャオバイを見て、二人の兄弟は泣き出しました

マスターに見られたのは幸いでした、それは 3 つの人生における祝福です、私を導いてほしいです

以上です、小さな人、三角のヒントで遊んでみましょう 原理は理解できるかもしれませんし、理解できないかもしれません。インターネット上のコードを直接使用することもできますが、私たちの大切なオタク精神とは一致しません

一緒に「オタク精神」を唱えましょう。」

の原則この記事はブロガー自身のコレクションであり、テストした結果、まったく問題はありません。もちろん、この効果を達成するための他の方法を排除するものではありません。同じ考えをお持ちの場合は、私をフォローしてください。または私

あなたをフォローしたいです

最後の署名:

16-03-10、

環境はまだ良いです、

私の周りのルームメイトは大家さんを喜んで演じています