CSSで三角形を作るーチートー

ブログのテーマを制作していると三角形をCSSで書く場面が度々でてくるので、チートとして記録しておきます。

下向き三角

.sankaku p:before{
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    margin: 100px;
    border-style: solid;
    border-color: #EDF3F7 transparent transparent transparent;
    border-width: 25px 25px 25px 25px;
}

左向き三角

.sankaku p:before{
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    margin: 100px;
    border-style: solid;
    border-color: transparent #000 transparent transparent;
    border-width: 25px 25px 25px 25px;
}

右向き三角

.sankaku p:before{
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    margin: 100px;
    border-style: solid;
    border-color: transparent transparent #343434 transparent;
    border-width: 25px 25px 25px 25px;
}

上向き三角

.sankaku p:before{
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    margin: 100px;
    border-style: solid;
    border-color: transparent transparent transparent #999;
    border-width: 25px 25px 25px 25px;
}

サイドバーのリンクに矢印をつけるサンプル

/* サイドバーリンクの装飾　*/
.hatena-module.hatena-module-links ul li a::before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    margin: 0;
    border-style: solid;
    border-color: transparent transparent transparent #999;
    border-width: 5px 5px 5px 5px;
    top: .2em;
    left: 0;
}

.hatena-module.hatena-module-links ul li a {
    position: relative;
    padding-left: 15px;
}