效果实现案例1 - 林七七
程序员文章站
2022-04-28 12:26:45
...
今天要介绍的是三角形的使用案例,照旧先给效果图。
解释:
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代码如下:
div id="container">
div id="square">
div id="tip">已点div>
div>
div>
CSS代码如下:
1 *{ 2 margin: 0; 3 padding: 0; 4 } 5 #container { 6 text-align: center; 7 } 8 #square { 9 position: relative; 10 background-color: #DBEDFD; 11 width: 100px; 12 height: 100px; 13 margin: 50px auto; 14 overflow:hidden; 15 } 16 #tip { 17 height: 20%; 18 width: 80%; 19 position: absolute; 20 top: 10%; 21 right: -20%; 22 transform: rotate(45deg); 23 background-color: white; 24 }
希望大家可以提供更好的效果实现方法,O(∩_∩)O谢谢
上一篇: 笔记本电脑不显示桌面怎么解决
推荐阅读
-
jQuery实现的卷帘门滑入滑出效果【案例】
-
JS/jQuery实现简单的开关灯效果【案例】
-
jqPaginator结合express实现分页展示内容效果第1/2页
-
Vue3.0 自己实现放大镜效果案例讲解
-
JS简单小应用之点击变色(1次)效果实现
-
用VBS模拟实现PHP的sha1_file函数效果代码
-
使用SpringSide的PropertyFilter无法实现 where 属性名1 like '%值1%' or 属性名1 like '%值2%' 的效果
-
Vue $attrs & inheritAttr实现button禁用效果案例
-
unity官方案例Stealth中 激光栅栏 忽明忽暗效果实现
-
原生js实现拖拽效果案例