CSSで数学の凹凸まで含めた増減表の矢印書いてみた．

初心者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で白くすれば，四分円の弧ができます．

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

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

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