CSS 布局：position

点击链接预览：CODEPEN

参考：

1. cssnext 演示

2. 你对Position的了解程度有多少?

3. HTML和CSS高级指南之二——定位详解

html 部分：

Tabs

PostCSS 部分（使用pluins：postcss-cssnext）：

:root {
  --r: 50px;
  --height: calc(2*var(--r));
  --w: 10px;
}

.tabs {
  width: 500px;
  height: 300px;
  position: relative;
  background: lightblue;
  display: flex;
  /*垂直、水平居中*/
  justify-content: center;
  align-items: center;
}

.title {
  font-size: 150px;
  color: # 333;
}

.close {
  position: absolute;
  right: 5px;
  top: 5px;
  width: var(--height);
  height: var(--height);
  opacity: 0.3;
}

.close:hover {
  opacity: 1;
  background: lightgreen;
}

.close:before,
.close:after {
  position: absolute;
  left: calc(var(--r)-var(--w)/2);
  top: calc(-(1.3*var(--height)-var(--height))/2);
  content: ' ';
  height: calc(1.3*var(--height));
  width: var(--w);
  background-color: # 333;
  border-radius: calc(var(--w)/2);
}

.close:before {
  transform: rotate(45deg);
}

.close:after {
  transform: rotate(-45deg);
}

关键字：css, var, height, close

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！