在优化页面时，对于原创文章需要设计一个醒目的标识，最初的方式是以图标+文字形式放置于标题下方，如下图：
似乎显得有些杂乱，且不容易区分。于是，对其优化如下：
如此，显得简单、清爽许多。o(￣▽￣)ｄ
在此，对此方案涉及的计算问题作一总结。
原理
对一矩形背景块逆时针旋转45°，再向左、向下位移一定位置，即可。
步骤
1. 绘制矩形色块
2. 按中心点逆时针旋转45°
3. 移动位置
接下来两步是重点和关键，如何才能确定偏移量和色块的长度呢？身为完美主义者，靠“猜”是不可能的……ヽ(`З’)ﾉ
假设：移动后的色块中心点坐标（坐标原点为左上角）为(x,x)，如x=24，色块长度为W，高度为H。
则，中心点的偏移量为(x-W/2, x-H/2)，如下图：
4. 确定长度
应用勾股定理，计算得如下公式：W=(x-H/2*√2+x)*√2+H*2，结果便是色块的最小长度。
将多余的部分隐藏，即为最终的结果：
完美！干杯！[]~(￣▽￣)~*
