最近在捣鼓自己的博客页面，总觉得那个侧边栏有点太规矩，方方正正的，看久有点呆板。我就寻思着，能不能让它稍微“歪”一点，看起来有点设计感，不那么死板。
想法初现
一开始就是这么个简单的想法，让某个模块，比如一个推荐文章的卡片，或者整个侧边栏的背景，稍微倾斜一下。不是旋转，就是那种平行四边形的感觉，稍微歪一点头那样。
动手尝试
我想到的就是用图片呗，直接做一个歪的效果图当背景。但这法子太笨，里面的文字内容还得想办法对齐，而且以后要改动背景色或者内容啥的，还得重新做图，太麻烦，不灵活。
然后我就琢磨，能不能用代码直接让那个盒子（就是那个div）歪掉。我试试调边距margin或者定位position啥的，发现那只是移动位置，或者让它变形得很奇怪，不是我想要的那种整体倾斜的效果。
找到门路
后来瞎搜一通，好像是看到有人提到一个叫transform的玩意儿。我就去查查，发现里面有个skew，这名字听着就对劲儿，“歪斜”的意思嘛
这东西挺有意思的，可以直接指定一个角度，让元素沿着X轴或者Y轴倾斜。
于是我就赶紧动手试试：
- 先选中我想要歪的那个区域，比如说侧边栏的整个大盒子。
- 给它加上
transform: skewX(-10deg);这样一行样式。那个-10deg就是倾斜的角度，负号是往一个方向歪，正号就往另一个方向歪。用skewX是水平方向歪，用skewY就是垂直方向歪。
加上之后，那个盒子立马就歪过来！看着效果还真不错，就是我想要的那种感觉。
细节调整
不过直接让整个盒子歪之后，里面的文字、图片啥的也都跟着歪。如果只是个背景装饰还但如果里面有重要的阅读内容，那字歪着看可就费劲。
这时候就得想点办法。 我试两种思路：
只让外层的容器歪，里面的内容再用一个反向的
skew给它“正”回来。比如外面skewX(-10deg)，里面就给内容套个盒子，加上skewX(10deg)。这样背景是歪的，但字是正的。不过这样套娃有点麻烦，有时候对齐还容易出问题。更简单粗暴的，就是干脆只歪一个装饰性的元素。比如，在侧边栏内容的后面放一个空的
div当背景板，只让这个背景板skew歪掉，内容本身还是规规矩矩地放在它上面。这样互不影响，实现起来简单多。
我选第二种方法，搞个歪歪的背景条在侧边栏标题下面，感觉一下子就活泼起来。
最终效果
就这么折腾一小会儿，总算是把我那个呆板的侧边栏给整得“歪歪扭扭”，当然是褒义的歪哈。虽然只是一个小小的视觉效果改变，但自己动手实现出来还是挺有成就感的。
有时候网页上一些看起来挺特别的效果，背后就是这么一两行代码的事儿，但从想到、找到方法、再到动手实现和微调，这个过程还是挺有意思的。记录一下，省得下次又忘怎么搞的。