伊藤商店

伊藤商店の覚書

いつも忘れる三角・＜のSCSS

css・scss

毎度忘れてネットを彷徨うか過去の案件を探してしまう、三角やら＜のCSSをメモ。

カッコ＞

//下＞
.hoge{
    &::after{
        display: block;
        cursor: pointer;
        position: absolute;
        content: '';
        width: 15px;
        height: 15px;
        border-top: solid 1px #fff;
        border-right: solid 1px #fff;
        transform: rotate(135deg);
        top: calc(50% - 7px);
        right: 5%;
        margin-top: -4px;
    }
}

//上＞ 角度を変えただけ
.hoge{
    &::after{
        display: block;
        cursor: pointer;
        position: absolute;
        content: '';
        width: 15px;
        height: 15px;
        border-top: solid 1px #fff;
        border-right: solid 1px #fff;
        transform: rotate(-45deg);
        top: calc(50% - 7px);
        right: 5%;
        margin-top: -4px;
    }
}

左右 正三角形

//右の場合
.tryright{
    &::before{
        position: absolute;
        display: block;
        left: 5%;
        top: calc(50% - 10px);
        content: "";
        border-left: 17px solid #FFF;
        border-top: 10px solid transparent; 
        border-bottom: 10px solid transparent; 
        height: 0;
        width: 0;
    }
}
//左の場合　下の場合はtransform: rotate(90deg);
.tryright{
    &::before{
        position: absolute;
        display: block;
        left: 5%;
        top: calc(50% - 10px);
        content: "";
        border-left: 17px solid #FFF;
        border-top: 10px solid transparent; 
        border-bottom: 10px solid transparent; 
        transform: rotate(60deg);
        height: 0;
        width: 0;
    }
}

一覧へ