CSSで三すくみの図を作る。

ゲームの説明とかに使えそう

<!-- 三すくみ -->
<div class="sansukumi">
  <div class="sansukumi-content-a red">
    <p>グー</p>  
  </div>
  <div class="sansukumi-content-b green">
    <p>チョキ</p>
  </div>
  <div class="sansukumi-content-c yellow">
    <p>パー</p>
  </div>
  <!-- 矢印 -->
  <div class="sansukumi-arrow-AB"></div>
  <div class="sansukumi-arrow-BC"></div>
  <div class="sansukumi-arrow-CA"></div>
</div>

.sansukumi{
  position: relative;
  margin: 5px 0 0 5px;
  width: 300px;
  height: 300px;
}

div[class^="sansukumi-content"]{
  position: absolute;
  width: 40%;
  height: 40%;
  border: 1px solid #000;
  border-radius: 100%;
  transform: translateX(-50%);
}

.sansukumi-content-a{
  top: 0;
  left: 50%;
}

.sansukumi-content-b{
  top: 50%;
  right: -20%;
}

.sansukumi-content-c{
  top: 50%;
  left: 20%;
}

/* 矢印 */
div[class^="sansukumi-arrow"]{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 80px;
  transform-origin: left top
}

div[class^="sansukumi-arrow"]:before,
div[class^="sansukumi-arrow"]:after{
  position: absolute;
  content: "";
  display: inline-block;
}

/* 矢印の三角 */
div[class^="sansukumi-arrow"]:before{
  border: 20px solid transparent;
  border-bottom: 10px solid;
  border-bottom-color: blue;
}

/*　矢印の四角　*/
div[class^="sansukumi-arrow"]:after{
  /* 50% - border-bottom(px) */
  top: calc(50% - 10px);
  left: 50%;
  width: 50%;
  /* 100% - border-top(px)*2 */
  height: calc(100% - 40px);
  background: blue;
  transform: translateX(-50%);
}

/* 矢印位置 */
.sansukumi-arrow-AB{
   transform: translate(50px,-10px) rotate(150deg) translate(-50%,-50%);
}

.sansukumi-arrow-BC{
   transform: translate(-5px,60px) rotate(270deg) translate(-50%,-50%);
}

.sansukumi-arrow-CA{
   transform: translate(-50px,-20px) rotate(30deg) translate(-50%,-50%);
}

/* 円の色 */
.green{
  background: green;
}

.red{
  background: red;
}

.yellow{
  background: yellow;
}

/* テキストのスタイル */
div[class^="sansukumi-content"] > p{
  position: absolute;
  top: 50%;
  left: 50%;
  font-family: arial-black;
  font-size: 1.5em;
  color: skyblue;
  white-space: nowrap;
  transform: translate(-50%,-50%);
}