解释：
1、这个正方形上的字就省略不说了，但要控制好文字块的宽度，以免被上面的"已点"提示挡到。
2、关于“已点”提示，我是如下实现的：大div设置“position:relative;”，小div设置"position:absolute;"; 要设置好小div的width和height，再进行小div的旋转transform和top、right等细节的调整即可完成。
Tip：
1、旋转时可重新设定旋转中心，用transform-origin（具体使用细节请自行搜索），默认旋转中心是元素自己的中心位置；
2、小div的高度、宽度、top、right等值都会影响旋转效果，旋转角度默认45deg，其它可根据效果自行调整。
3、记得加上overflow:hidden; 隐藏掉大div之外的小div。
效果图如下所示：
html代码如下：
已点
查看更多关于效果实现案例1_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did111681