cssでリストに出っ張った矢印をつける

2013年8月17日更新 view: 15 view
photoBy: http://coliss.com/wp-content/uploads-2010-2d/2010120305-01.png

上記のような矢印をCSSで作る。

リストなどのアクセントに最適。

スポンサードリンク
<style>
.demo1 {
    background-color: #333;
    height: 100px;
    position: relative;
    width: 100px;
}
.demo1:after {
    content: ' ';
    height: 0;
    position: absolute;
    width: 0;
    border: 10px solid transparent;
    border-top-color: #333;
    top: 100%;
    left: 10px;
}

</style>

<div class="demo1">
        aa
</div>

たったこれだけでできあがり。

お試しあれ。

スポンサードリンク

関連記事

関連カテゴリ