Blog

HOME > Web > css > 【CSS】枠の下に三角を表示

【CSS】枠の下に三角を表示

2016/02/01

css

備忘録です。

下記のサンプルのように枠の下に三角を表示するCSSです。

【サンプル1】

テキスト

サンプル1のhtml

    <div class="sampleBox1">テキスト</div>


サンプル1のCSS

    .sampleBox1{
        width:100px;
        height:auto;
        padding:10px 0;
        position:relative;
        border:1px solid #0000ff;
        text-align:center;
    }
    .sampleBox1:before{
        position:absolute;
        width:0;
        height:0;
        border-color:#00f transparent transparent;/*下に三角*/
        border-width:10px;
        border-style:solid;
        bottom:-20px;
        left:40%;
        content: " ";
    }


【応用編】カーソルを合わせると三角表示

【サンプル2】

テキスト

サンプル2のhtml

    <div class="sampleBox2">テキスト</div>


サンプル2のCSS

    .sampleBox2{
        display:block;
        width:100px;
        height:auto;
        padding:10px 0;
        position:relative;
        border:1px solid #0000ff;
        text-align:center;
        cursor:pointer;
    }
    .sampleBox2:hover:before{
        position:absolute;
        width:0;
        height:0;
        border-color:#00f transparent transparent;/*下に三角*/
        border-width:10px;
        border-style:solid;
        bottom:-20px;
        left:40%;
        content: " ";
    }


【応用編】枠の右に三角表示

【サンプル3】

テキスト

サンプル3のhtml

    <div class="sampleBox3">テキスト</div>


サンプル3のCSS

    .sampleBox3{
        width:100px;
        height:auto;
        padding:10px 0;
        position:relative;
        border:1px solid #0000ff;
        text-align:center;
    }
    .sampleBox3:hover:before{
        position:absolute;
        width:0;
        height:0;
        border-color:transparent transparent transparent #00f;/*右に三角*/
        border-width:10px;
        border-style:solid;
        top:30%;
        right:-20px;
        content: " ";
    }

cssを色々と変えて試してみてください。

カテゴリー

月間アーカイブ

«前の記事

一覧に戻る

次の記事»

最近の投稿

人気の記事

MORE

ミュージシャンズ・プラザ

神社仏閣ホームーページ制作

ホームページ制作問合せ