• css3

    borderで描くアイコン

    2012/09/05

    borderで描くアイコン。

    border06.png

    アイコン作成によく使うborderですが、 頻繁に使うのはこれですかね。

    スマホサイトのリンクでは定番的に使われていますね。

     

    border11.png

     

    
    width:10px;
    height:10px;
    border-top:3px solid #999;
    border-right:3px solid #999;
    -webkit-transform:rotate(45deg);
    
    

    二辺のborderと傾けて終わりです。

     

     

    でも、borderでは他にも色々なアイコンが作れます!

    まずはborderについてしっかり理解しましょう!ねっ!

     

     

    このようなボックスを囲んだ一般的な solid ボーダーですが、

     

    border02.png

     

    正確に見るとボーダーはこのような形になっています。

     

     

     

    つまり、width:0 height:0 にボーダーをつけた場合、ボーターはこのような形になります。

     

    border03.png

     

     

    これを利用して▲を作ります。

    border04.png

    
    width: 0;
    height: 0;
    border-top: none;
    border-right: 39px solid transparent;
    border-bottom: 39px solid #fa6565;
    border-left: 39px solid transparent;
    
    

     

    まずは幅、高さを0に。 ボーダーボトムだけを残して▲に見せます。
    左右をtansparentで透明にし、トップはnoneにします。 (トップも透明で表示すると余分な高さが作成される為)

     

     

    同様に、二等辺三角形

    border05.png

    
    width: 0;
    height: 0;
    border-top: none;
    border-right: 39px solid transparent;
    border-bottom: 78px solid #fa6565;
    border-left: 39px solid transparent;
    
    

     

    ※▲を作る場合の注意点

    以下のような設定でないと、三角がジャギってしまいます。

    border06.png

    A=B または A/2=B

     

     

    これをふまえて色々な形を。

     

     

     

    border-rightもnoneにして、直角三角形。

     

    border7.png

    
    width: 0;
    height: 0;
    border-top: none;
    border-right: none;
    border-bottom: 78px solid #fa6565;
    border-left: 39px solid transparent;
    
    

     

     

     

    border-leftにして、右向き三角に。-webkit-box-reflectで反転のリフェクト処理をすると、ひし形に。

     

    border8.png

    
    -webkit-box-reflect: left;
    width: 0;
    height: 0;
    border-top: 39px solid transparent;
    border-right: none;
    border-bottom: 39px solid transparent;
    border-left: 78px solid #fa6565;
    
    

     

     

     

    角丸ボックスの疑似要素で▲を作って吹き出し風。

     

    border9.png

    
    <div id="fukidashi">吹き出し</div>
    
    
    
    #fukidashi{
    position: relative;
    width: 200px;
    height: 100px;
    border-radius: 50px;
    background: #fa6565;
    line-height: 100px;
    text-align: center;
    }
    #fukidashi:after{
    position: absolute;
    top: 45px;
    right: -15px;
    width: 0;
    height: 0;
    border-top: none;
    border-right: none;
    border-bottom: 20px solid transparent;
    border-left: 20px solid #fa6565;
    content: "";
    }
    
    

     

     

    正円にしたborderの右だけを透明にすると、パッ○マン風。

     

    border10.png

    
    width:0;
    height:0;
    border-radius: 20px;
    border-right: 20px solid transparent;
    border-left: 20px solid #fa6565;
    border-bottom: 20px solid #fa6565;
    border-top: 20px solid #fa6565;
    
    

     

    アイデア次第でいろんなことができますねー!

    タグ:CSS3

この記事へのコメント

コメントを送る

  ※ メールは公開されません
Loading...
 画像の文字を入力してください

back