你的位置:首页 > 网页设计

[网页设计]效果实现案例1


今天要介绍的是三角形的使用案例,照旧先给效果图。


解释:
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谢谢