css border-radius & yin-yang & taiji

css border-radius & yin-yang & taiji

css border-radius & yin-yang & taiji

solution

css border-radius & tabs effect

​​https://codepen.io/xgqfrms/full/ZEbyMyz​​

See the Pen <a href="https://codepen.io/xgqfrms/pen/ZEbyMyz">css border-radius &amp; tabs effect</a> by xgqfrms (<a href="https://codepen.io/xgqfrms">@xgqfrms</a>) on <a href="https://codepen.io">CodePen</a>.

@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;
      }
    });
  }
}

---

​

​

See the Pen <a href="https://codepen.io/xgqfrms/pen/JjYJZMZ">animated illustration: how to ☯ out of 3 components</a> by xgqfrms (<a href="https://codepen.io/xgqfrms">@xgqfrms</a>) on <a href="https://codepen.io">CodePen</a>.

​

---

xgqfrms