欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

效果实现案例1 - 林七七

程序员文章站 2022-04-06 20:09:52
...
今天要介绍的是三角形的使用案例,照旧先给效果图。
效果实现案例1 - 林七七
效果实现案例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。
效果图如下所示:
效果实现案例1 - 林七七
效果实现案例1 - 林七七
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谢谢