前端练习55 图片对比效果

题目

今天在整理收藏夹时，发现有一个很不错的网站picdiet，可以用来压缩图片，效果很不错。

不过今天的练习不是关于图片压缩，而是它的官方的一个用来对比压缩前后图片的效果的组件，效果如下：

试着在Vue中实现这个效果

分析

分几个模块来实现。在搭起架子后，首先实现中间的分割线，样式不难，两边的小三角也可以用border模拟实现

.separator {
  position: absolute;
  top: 0;
  left: 200px;
  width: 4px;
  height: 100%;
  background: darkgray;
  z-index: 3;
}

.separator:before, .separator:after {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  border: 10px solid transparent;
}

.separator:before {
  right: 10px;
  border-right-color: darkgray;
}

.separator:after {
  left: 10px;
  border-left-color: darkgray;
}