cssで90度以上の矢印を作る

画像のスライドボタンなどでよくある、縦に広がっている矢印をcssだけで作ります。

<p class="big-arrow-right"></p>

.big-arrow-right{
  position: relative;
}
.big-arrow-right::before {
    content:' ';
    width: 50px;
    height: 50px;
    border-right: solid 4px #ccc;
    transform: rotate(35deg);
    position: absolute;
    top: calc(50% - 19px);
    right: 10px;
}

 .big-arrow-right::after {
   content:' ';
   width: 50px;
   height: 50px;
   border-right: solid 4px #ccc;
   transform: rotate(-35deg);
   position: absolute;
   top: calc(50% - 32px);
   right: 10px;
 }

before、afterを二つ使って、上の矢印と下の矢印をくっつけています。
top: calc(50% - 19px);とtop: calc(50% - 32px);なので、微妙にセンターになっていないかもしれません。