三角形
最常见的一种形状了。切图，不存在的。
/** 正三角 */ .triangle { width: 0; height: 0; border-style: solid; border-width: 0 25px 40px 25px; border-color: transparent transparent rgb(245, 129, 127) transparent; }
/** 倒三角 */ .triangle { width: 0; height: 0; border-style: solid; border-width: 40px 25px 0 25px; border-color: rgb(245, 129, 127) transparent transparent transparent; }
虚线效果
.dotted-line{ border: 1px dashed transparent; background: linear-gradient(white,white) padding-box, repeating-linear-gradient(-45deg,#ccc 0, #ccc .25em,white 0,white .75em); }
css自带的border-style属性 dotted/ dashed . 效果展示出来太密了，并不符合UI设计
具体的虚线的颜色和间距都可以通过repeating-linear-gradient生成的条纹背景去调整。
文本超出省略号
单行文本
.single-ellipsis{ width: 500px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
多行文本
.multiline-ellipsis { display: -webkit-box; word-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp: 4; //需要显示的行数 overflow: hidden; text-overflow: ellipsis; }
扩展: -webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。
为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：
- display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
- -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式
- text-overflow，可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本
浏览器兼容性：
时间轴
html结构
<div class="timeline-content"> <div v-for='(item, index) in timeLine' :key='index' class="time-line"> <div :class="`state-${item.state} state-icon`"></div> <div class="timeline-title">{{item.title}}</div> </div> </div>
css样式
/** 时间轴 */ .timeline-content{ display: flex; .time-line{ padding: 10px 10px 10px 20px; position: relative; &::before{ content: ''; height: 1px; width: calc(100% - 34px); background: #EBEBEB; position: absolute; left: 24px; top: 0; } } .state-icon{ width: 20px; height: 20px; position: absolute; top: -12px; left: 0; } .state-1{ background: url('https://static.daojia.com/assets/project/tosimple-pic/fen-zu-7-copy-6bei-fen_1589266208621.png') no-repeat; background-size: cover; } .state-2{ background: url('https://static.daojia.com/assets/project/tosimple-pic/12_1589266226040.png') no-repeat; background-size: cover; } .state-3{ background: url('https://static.daojia.com/assets/project/tosimple-pic/fen-zu-7-copy-3_1589266140087.png') no-repeat; background-size: cover; } }
calc()函数 用来计算css属性的值。
