刚开始接到任务只是一个将一个之前的页面进行修改，没想到遇到了各种问题。

1. 三角形照片以及遮盖层。

三角形的实现网上面试题、技术贴也常看到，第一反应就是使用border来实现三角形。使用border来实现三角形还是很方便的。只需要根据三角形的各边给4个border不同的值即可实现。但是这种方法更多的是单色的三角形图标，好像没办法实现三角形照片。只能另找他法。
搜索下找到了变换方法，使用的是rotate和skew。需要两层div，先是外层div旋转45度，然后里层div沿X、Y轴倾斜相同度数，就可以生成一个菱形，如果遮住一半即可生成三角形。图片呢，就是放在内层div中，然后在旋转-45度并且倾斜负的里层div旋转度数，使得形成图片正常方形。如下：

1
2
3
4
5
6
7
8
<div class="row">
  <div class="a">
    <div class="b">
      <img src="" alt="">
      <div class="cover"></div>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
.a {
  float: left;
  transform: rotate(45deg);
}
.b {
  width: 217.1px;
  height: 217.1px;
  transform: skew(10deg, 10deg);
  background: #000;
}

.row是用来遮盖菱形上或下半部分形成三角形，img标签和.cover使用绝对定位相对于.row，使得正好将三角形覆盖，.cover中的内容使用margin以及width，使内容正好居中。效果如下：

实现的缺点是IE8即以下不兼容，并且绝对定位因为变换不是特别好调整位置，最后是选择上传图片直接使用三角形图片，IE8以下使用另一套绝对定位，但是遮盖层还是会方形显示。

2. 投票功能

投票系统主要两个麻烦，一个是跨域问题，一个是投票的限制问题。因为投票系统是西安部门进行开发的，是刚开发不久的系统，而且是个问卷系统，并没有充分考虑投票这方面的限制，以及投票成功的反馈。投票的限制前端可以做的应该就是使用localstorage或者cookie来进行一部分限制，更多限制应该还是后端来做支持。跨域问题，GET方法可以使用jsonp很容易解决，但是对于POST就不是特别清晰，我们这边后端做限制的支持，就将投票也改成了GET请求。
其实这里的反馈并不怎么好，网速慢的话可能会造成点击没有任何反馈。所以就前端点击，直接投票技术+1，并且投票的心形变成红色，然后请求后端。如果发生错误，提示刷新页面就可以重新投票。