xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

css border-radius & yin-yang & taiji

solution

css border-radius & tabs effect

@charset "UTF-8";

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.box{
   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 {
   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;
      }
    });
  }
}

refs

https://www.w3schools.com/css/css3_borders.asp

https://css-tricks.com/almanac/properties/b/border-radius/

css yin-yang

https://codepen.io/xgqfrms/pen/VwvWdzV

https://coursesweb.net/css/yin-yang-css_cs

https://blog.logrocket.com/how-to-create-yin-yang-symbol-pure-css/

https://css-tricks.com/creating-yin-yang-loaders-web/

https://gist.github.com/felipecabargas/6574545