css border-radius & yin-yang & taiji

solution

css border-radius & tabs effect

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

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

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/

See the Pen animated illustration: how to ☯ out of 3 components by xgqfrms
(@xgqfrms) on CodePen.

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


css border-radius & yin-yang & taiji的更多相关文章

  1. CSS border三角、圆角图形生成技术简介

    http://www.zhangxinxu.com/wordpress/?p=794 一.前言 利用CSS的border属性可以生成一些图形,例如三角或是圆角.纯粹的CSS2的内容,没有兼容性的问题, ...

  2. CSS border边框属性教程(color style)

    CSS 边框即CSS border-border边框样式颜色.边框样式.边框宽度的语法结构与应用案例教程篇 一.CSS 边框基础知识 CSS 边框即CSS border是控制对象的边框边线宽度.颜色. ...

  3. css border

    CSS border用于设置HTML元素(如div)的边框,包括边框的宽度.颜色和样式.本文章向码农介绍CSS border边框属性详细内容,感兴趣的码农可以参考一下. CSS 边框即CSS bord ...

  4. CSS Border(边框)

    CSS Border(边框) 一.CSS 边框属性 CSS边框属性允许你指定一个元素边框的样式和颜色. 示例效果: 二.边框样式 边框样式属性指定要显示什么样的边界. border-style属性用来 ...

  5. CSS border gradient color All In One

    CSS border gradient color All In One CSS Gradient Borders border-image-source & border-image-sli ...

  6. [CSS]border边框

    border: 1px solid #ccc;    /*1像素 实线 灰色*/可分割成:border-width:1px;border-style: solid; border-color: #00 ...

  7. css border制作小三角形状及气泡框(兼容IE6)

    先看下CSS盒模型 一个盒子包括: margin+border+padding+content 上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三 ...

  8. CSS border系列

    本文更新版链接 一.border 关于border的3个属性,分别为border-width.border-style.border-color. 其中,border-color默认为元素内容的前景色 ...

  9. CSS border 属性和 border-collapse 属性

    border 简写属性在一个声明设置所有的边框属性. 可以按顺序设置如下属性: border-width border-style border-color 如果不设置其中的某个值,也不会出问题,比如 ...

  10. CSS border 生成三角

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

随机推荐

  1. python中贪婪与非贪婪

    Python里数量词默认是贪婪的(在少数语言里也可能是默认非贪婪),总是尝试匹配尽可能多的字符: 非贪婪则相反,总是尝试匹配尽可能少的字符. 在"*","?", ...

  2. REST架构及其介绍

    概述     REST是英文Representational State Transfer的缩写,中文翻译:表述性状态转移.     他是由Roy Thomas Fielding博士在他的论文 < ...

  3. js文字颜色闪烁

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. cassandra权威指南读书笔记--安全

    认证和授权driver,JMX和cassandra服务器支持SSL/TLS,cassandra节点间也支持SSL/TLS.密码认证器cassandra还支持自定义,可插拔的认证机制.默认的认证器:or ...

  5. 给jekyll博客添加搜索功能

    使用SWIFTYPE为jekyll博客添加搜索引擎 步骤 1.首先去swiftype注册一个账号 2.接着添加自己想要配置的网站地址并为新设定的引擎添加一个名字(非会员只能设置一个引擎). 3.收到验 ...

  6. Workflow任务流发布不了

    依赖的工作流要发布

  7. Hyperbase数据迁移

    原老集群有100台服务器,新增90台服务器和原来的服务器构成新Hyperbase集群最初考虑有两种方案distcp和snapshot,由于distcp进行数据迁移时不在HBase本身控制范围内,故选用 ...

  8. leetcode常见问题

    开学了 开始每日刷leetcode了  ,开一个新分类记录做题过程和心得. 1.出现本地调试无问题但提交后报错时,很有可能是全局变量导致的,解决办法 (1).尽量写成局部变量,函数尽量传参进入. (2 ...

  9. HDU5739 Fantasia【点双连通分量 割点】

    HDU5739 Fantasia 题意: 给出一张\(N\)个点的无向图\(G\),每个点都有权值\(w_i\),要求计算\(\sum_{i=1}^{N}i\cdot G_i % 1e9+7\) 其中 ...

  10. poj3693 Maximum repetition substring (后缀数组+rmq)

    Description The repetition number of a string is defined as the maximum number R such that the strin ...