css border-radius & yin-yang & taiji

solution

css border-radius & tabs effect

See the Pen css border-radius & tabs effect by xgqfrms
(@xgqfrms) on CodePen.

@charset "UTF-8";

*{

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}

.box{

  width: 100vw;

  height: auto;

  min-height: 100px;

  display: flex;

  flex-wrap: nowrap;

  flex-flow: row;

  align-items: center;

  justify-content: space-between;

  border: 1px solid #ccc;

  padding: 0;

}

.item {

  width: 50%;

  height: 100px;

  line-height: 100px;

  text-align: center;

}

.item-selected{

  background: #000;

}

.item-unselected{

  background: #fff;

}

.item-left{

  border-radius: 0 25px 0 0;

  -webkit-border-radius: 0 25px 0 0;

  -moz-border-radius: 0 25px 0 0;

  -ms-border-radius: 0 25px 0 0;

  -o-border-radius: 0 25px 0 0;

  position: relative;

}

.item-right{

  border-radius: 0 0 0 25px;

  -webkit-border-radius: 0 0 0 25px;

  -moz-border-radius: 0 0 0 25px;

  -ms-border-radius: 0 0 0 25px;

  -o-border-radius: 0 0 0 25px;

  position: relative;

}

.item-unselected .item-left,

.item-unselected .item-right {

  color: #fff;

  background: #000;

}

.item-selected .item-left,

.item-selected .item-right {

  color: #000;

  background: #fff;

}

  <section>

      <div class="box">

        <div class="item item-selected">

          <div class="item-left">VIP</div>

        </div>

        <div class="item item-unselected">

          <div class="item-right">Others</div>

        </div>

      </div>

  </section>

"use strict";

/**

 *

 * @author xgqfrms

 * @license MIT

 * @copyright xgqfrms

 * @created 2020-04-28

 * @modified

 *

 * @description css border-radius

 * @augments

 * @example

 * @link

 *

 */

const log = console.log;

const items = [...document.querySelectorAll(`.item`)];

const updateSelected = (items, selectedItem) => {

  items.forEach(item => {

    item.classList.remove(`item-selected`);

    item.classList.add(`item-unselected`)

  });

  selectedItem.classList.remove(`item-unselected`);

  selectedItem.classList.add(`item-selected`)

}

for (const item of items) {

  const flag = item.dataset.flag || false;

  if(!flag) {

    item.dataset.flag = true;

    item.addEventListener(`click`, (e) => {

      const className = e.target.getAttribute(`class`);

      switch (className) {

        case `item-left`:

        case `item-right`:

          updateSelected(items, e.target.parentElement);

          break;

        default:

          break;

      }

    });

  }

}