效果实现案例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代码如下：

*{
    margin: 0;
    padding: 0;
}
#container {
    text-align: center;
}
#square {
    position: relative;
    background-color: #DBEDFD;
    width: 100px;
    height: 100px;
    margin: 50px auto;
    overflow:hidden;
}
#tip {
    height: 20%;
    width: 80%;
    position: absolute;
    top: 10%;
    right: -20%;
    transform: rotate(45deg);
    background-color: white;
}

 

希望大家可以提供更好的效果实现方法，O(∩_∩)O谢谢