初心者CSS使いです．

ネットではAKRという名前をよく使っていて，本業は予備校講師で，おいしい数学という，月間10万PV程の高校数学のサイトを運営しています．

さて，web上で高校数学の内容について書くときに，数学Ⅲの凹凸まで含めた増減表を書くことがあるかもしれません．

Unicodeでこれらの矢印を探すと

⤴

⤵

⤷

は見当たりますが，何故か単調増加かつ上に凸の矢印がありません！

しかもこれらは環境依存なので，あまりかっこよくない矢印に見える可能性があります．

そこでCSSで，これらの矢印を4つ，作ってみました．

arrow.css


.arrow-pp::before, .arrow-pp::after, .arrow-pm::before, .arrow-pm::after, .arrow-mp::before, .arrow-mp::after, .arrow-mm::before, .arrow-mm::after {
    content: "";
    position: absolute;
    margin: auto;
}
.arrow-pp {
    left: 3px;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 0 0 100% 0;
    background: #fff;
}
.arrow-pp::after {
    left: 11px;
    top: -4px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 2px 5px 2px;
    border-color: transparent transparent #000 transparent;
    transform: rotate(9deg);
}
.arrow-pm {
    left: 3px;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-left: 1px solid #000;
    border-top: 1px solid #000;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 100% 0 0 0;
    background: #fff;
}
.arrow-pm::after {
    left: 12px;
    top: -3px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 2px 5px 2px;
    border-color: transparent transparent #000 transparent;
    transform: rotate(87deg);
}
.arrow-mp {
    left: 3px;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-bottom: 1px solid #000;
    border-left: 1px solid #000;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 0 0 0 100%;
    background: #fff;
}
.arrow-mp::after {
    left: 12px;
    top: 10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 2px 5px 2px;
    border-color: transparent transparent #000 transparent;
    transform: rotate(91deg);
}
.arrow-mm {
    left: 3px;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-right: 1px solid #000;
    border-top: 1px solid #000;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 0 100% 0 0;
    background: #fff;
}
.arrow-mm::after {
    left: 11px;
    top: 10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 2px 5px 2px;
    border-color: transparent transparent #000 transparent;
    transform: rotate(165deg);
}

基本的にはborder-radiusを丸めたい箇所を100%にして四分円を作ります．
borderで枠線を作り，backgroundで白くすれば，四分円の弧ができます．

後は擬似要素を駆使して，二等辺三角形を後で付け足してあげればそれで終わりです．

意外と簡単に終わりました．

完成した矢印は弊サイトの凹凸まで含めた増減表とグラフの書き方をご覧くださいませ．