純粋な HTML+CSS でオリンピック リングを実装するためのサンプル コード

 <div class="コンテナ">
    <div class="リング ブルー"></div>
    <div class="リング 黄色 黄色1"></div>
    <div class="リング 黄色 黄色2"></div>
</div>

。指輪 {
    幅: 100ピクセル;
    高さ: 100px;
    境界線の半径: 50%;
    位置: 絶対;
    境界線のスタイル: solid;
    境界線の幅: 10px;
}

。青 {
    境界線の色: #0180C3;
    上: 0;
    左: 0;
    zインデックス: 0;
}

。黄色 {
    境界線の色: #FEB131;
    左: 70px;
    上: 60px;
}

.yellow1 {
    /* 青いリングの上 */
    zインデックス: 1;
    /* 切断円 */
    クリップパス: ポリゴン(0 0, 100% 100%, 0 100%);
}


.yellow2 {
    /* 青いリングの下 */
    Zインデックス: -1;
    クリップパス: ポリゴン(0 0, 100% 100%, 100% 0);
}