今天要介绍的是三角形的使用案例，照旧先给效果图。
解释：
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谢谢
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
399
