CSS の実践的なヒント: Triangles_html/css_WEB-ITnose の作成-htmlチュートリアル-php.cn

CSS の実践的なヒント: Triangles_html/css_WEB-ITnose の作成

WBOY

リリース： 2016-06-24 11:38:09

オリジナル

1374 人が閲覧しました

図に示すように三角形のアイコンを実装します:

HTML コードは次のとおりです:

<div class="arrow-up"></div><div class="arrow-down"></div><div class="arrow-left"></div><div class="arrow-right"></div>

ログイン後にコピー

css スタイル:

body{background:#faf7ef;}div{margin:20px auto}div.arrow-up {  width:0px;  height:0px;  border-left:50px solid transparent;    border-right:50px solid transparent;   border-bottom:50px solid #ff0000;   font-size:0px;  line-height:0px;} div.arrow-down {  width:0px;  height:0px;  border-left:50px solid transparent;  border-right:50px solid transparent;  border-top:50px solid #0000ff;  font-size:0px;  line-height:0px;} div.arrow-left {  width:0px;  height:0px;  border-bottom:50px solid transparent;    border-top:50px solid transparent;   border-right:50px solid #008000;   font-size:0px;  line-height:0px;} div.arrow-right {  width:0px;  height:0px;  border-bottom:50px solid transparent;   border-top:50px solid transparent;   border-left:50px solid #ffff00;   font-size:0px;  line-height:0px;}

ログイン後にコピー

作者:嵐の後の虹を見てください

出典: http://www.cnblogs.com/moqiutao/

この記事があなたの研究に役立つと思われる場合は、サポートと励ましをお願いします。