CSS图形

本文共--字 阅读约--分钟 | 浏览: -- Last Updated: 2021-07-03

进度线

CSS 圆点和线（进度线）在移动端的居中兼容性

使用px 而不是rem ，因为这就是属于“扣像素”。线的宽度为n，那么圆点的宽高最好为7n。基于元素绝对定位。

圆点向线偏移 -n px ，让线处于圆点的内部最左侧，线向相对方向偏移 2n px ，将整个圆理论上划分为 n / 2n / n / 2n / n。

.main {
  position: relative;
  width: 200px;
  height: 200px;
}

.dot {
  position: absolute;
  left: -1px;
  height: 7px;
  width: 7px;
  background: blue;
  border-radius: 50%;
  z-index: 2;
}

.line {
  position: absolute;
  left: 2px;
  height: 100%;
  border-left: 1px dashed blue;
}

<div class="main">
  <div class="dot"></div>
  <div class="line"></div>
</div>

css 倒三角

使用border

.triangleDiv{
  display: inline-block;
  border-left: 13 px solid transparent;
  border-right: 13px solid transparent;
  border-top: 13px solid #666666;
  height: 0;
  width: 0;
  transform: translateY(-50%);
  -webkit-transform:translateY(-50%); /* Safari 和 Chrome */
  -webkit-transform:translateY(-50%); 	/* Firefox */
}

css 箭头

.arrow {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-top: 2px solid #999;
  border-right: 2px solid #999;
  transform: translateY(-50%) rotate(45deg);
}
/* 45deg 右箭头 135 下箭头  225 左  315 上 */

css 对勾

.success-icon {
  width: 50px;
  height: 100px;
  border-color: #fff;
  border-style: solid;
  border-width: 0 12px 12px 0;
  transform: rotate(45deg);
}