前端

前端黑魔法--纯css折角头像的实现

今天公司的设计师提交了一个文艺的需求,设计一款文艺头像,如下图 要求是在不切图的情况下(服务器端保存原图)制作折角头像,在鼠标滑过时边框颜色产生变化如下图。 细想之下这个要求简直不科学,因为图片的border怎么会有这种奇怪形状?! 但是有一个可以偷懒的办法是,整个图片背景色是固定的(如图中是白色) 以下是我的解决方案: ①最底层是头像文件,有一圈10px的红色border ②右下角罩一个三角形,使用z-index来使其浮在图片上边 ③再在最上边罩一个跟底色通过色的三角形,使两个三角形大小差值(露出的那块面积)正好看起来像右下角的border 整体看起来就像下图(就像一个三明治) 那么就会存在两个问题 ①使用图片来遮罩未免有些low,而且如果过后设计告诉我要调整border粗细或者遮罩面积,还得重新作图 ②如何实现当鼠标滑过时头像border和中间层三角形同时变色? 首先解决第一个问题,在网上找了一圈后发现,很多花里胡哨的图片都能够通过border来绘制 如图,其实一个元素的border是这样的