まだ小さな三角形の写真をカットしていますか?純粋な CSS_html/css_WEB-ITnose を使用して単純な三角形を作成します。

学生の皆さん、アーティストから与えられた設計図が次のようなものである場合:

または次のようになります:

心の中では実際は断っていますが、それでも仕事をしなければなりません、ほとんどの学生はそうすることができます。 write

<style>.icon{width:20px;height:20px;display:block;margin:0 auto;background:url(...)}</style><div class="con">        <div class="icon"></div>        <span>添加会计</span></div>

または単に

<style>.icon img{...}</style><div class="con">        <div class="icon"><img src="..."></div>        <span>添加会计</span></div>

これで問題は解決しますが、この小さな点のために、非常に苦労してカットする必要があります（アーティストが作成した作品を楽しむことができる生徒はほとんどいません）スプライト写真）、遭遇するデザイン図面がレイヤー化されていなかったり、デザインソフトウェアに慣れていなかったりすると、非常にイライラするでしょう...

実は、このような小さなトゲのある点を修正する簡単な方法がありますので、ぜひご覧ください。 :

<style>.con2{height: 50px;line-height: 50px;text-align: center;background:#ccecec;position: relative;}.con2 i{border: 10px solid #ccecec; border-color: transparent transparent #ccecec transparent;position: absolute; top: -20px;left: 139px; }</style><div class="con">        <i></i>        <span>添加会计</span></div>

これはボーダーの問題に関係しますが、要素の幅が 0 に設定されているが、border-width が 0 より大きい数値である場合、結果は正方形になります (各辺は になります)。正三角形) の場合、border-color を上下左右の 4 色に設定すると、4 つの正三角形で構成される正方形になります。

<style>.test{width:0;border:50px solid ;border-color: #333 #ff0000 #ccecec #999}</style><div class="test"></div>

ある三辺の色を透明に設定すれば、任意の色の三角形が得られることは想像に難くありません。

<style>.test{width:0;border:50px solid ;border-color: transparent transparent #ccecec transparent}</style><div class="test"></div>

次に、5a8028ccc7a7e27417bff9f05adf5932 タグなどのこの要素の位置を相対位置に設定し、上と左の値を調整すると、CSS で書かれた小さな尖った先端を簡単に取得できます。

この境界線付きの尖った先端について、アイデアを与えます。上で実装した三角形に同様の要素を置きます。これを子三角形と呼びます。親三角形の境界線の色は、その境界線の色に設定されます。下の div 、サブ三角形の境界線の色を div の背景色に設定し、サブ三角形を配置します (サブ三角形の辺の 1 ピクセルが露出するように位置を調整することに注意してください)親三角形)、親三角形の位置を調整します。OK、完了です。

それを知っていれば、ショーを見るのと同じように扱ってください。あまり熟練していない生徒は、自分でもっと練習できます。たくさんのご批判、ご指摘をいただければ幸いです！