**フロントエンドcss書き込み三角形**

2193 ワード
css html
前端cssは三角形の額を書いて、初めてブログを書いて、主に学習の過程を記録したいので、中で出会った問題があって、くだらない話は多く言わないで、本題に入ります
cssはいろいろな三角形を実現しています.これは私がコードを練習している間に何度も出会ったものです.前は前のコードをくっつけていただけで、なぜか分かりませんが、今日は皆さんの書き方を見て、テープを写しています.




<meta charset="utf-8"/>
<style type="text/css">

div</span><span class="token punctuation">{
     </span>
  <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.triangle</span><span class="token punctuation">{
     </span>

<span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">border</span><span class="token punctuation">:</span> 10px solid transparent<span class="token punctuation">;</span>
<span class="token property">border-bottom-color</span><span class="token punctuation">:</span> orange<span class="token punctuation">;</span><span class="token comment">/*   bottom    top left right,              */</span>

<span class="token punctuation">}</span>

</style>



<div class="<span">"triangle"> 
</div>



</span></code></pre> 
 </div> 
</div>
                            </div>
                        </div>
CSS絶対位置決めとフローティングの区別と運用
CSS-簡易ラベル属性学習まとめ