效果实现案例1 - 林七七

<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="container"</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="square"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="tip"</span><span style="color: #0000ff;">></span>已点<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

<span style="color: #008080;"> 1</span> <span style="color: #800000;">*</span>{
<span style="color: #008080;"> 2</span> <span style="color: #ff0000;">    margin</span>:<span style="color: #0000ff;"> 0</span>;
<span style="color: #008080;"> 3</span> <span style="color: #ff0000;">    padding</span>:<span style="color: #0000ff;"> 0</span>;
<span style="color: #008080;"> 4</span> }
<span style="color: #008080;"> 5</span> <span style="color: #800000;">#container </span>{
<span style="color: #008080;"> 6</span> <span style="color: #ff0000;">    text-align</span>:<span style="color: #0000ff;"> center</span>;
<span style="color: #008080;"> 7</span> }
<span style="color: #008080;"> 8</span> <span style="color: #800000;">#square </span>{
<span style="color: #008080;"> 9</span> <span style="color: #ff0000;">    position</span>:<span style="color: #0000ff;"> relative</span>;
<span style="color: #008080;">10</span> <span style="color: #ff0000;">    background-color</span>:<span style="color: #0000ff;"> #DBEDFD</span>;
<span style="color: #008080;">11</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;"> 100px</span>;
<span style="color: #008080;">12</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;"> 100px</span>;
<span style="color: #008080;">13</span> <span style="color: #ff0000;">    margin</span>:<span style="color: #0000ff;"> 50px auto</span>;
<span style="color: #008080;">14</span> <span style="color: #ff0000;">    overflow</span>:<span style="color: #0000ff;">hidden</span>;
<span style="color: #008080;">15</span> }
<span style="color: #008080;">16</span> <span style="color: #800000;">#tip </span>{
<span style="color: #008080;">17</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;"> 20%</span>;
<span style="color: #008080;">18</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;"> 80%</span>;
<span style="color: #008080;">19</span> <span style="color: #ff0000;">    position</span>:<span style="color: #0000ff;"> absolute</span>;
<span style="color: #008080;">20</span> <span style="color: #ff0000;">    top</span>:<span style="color: #0000ff;"> 10%</span>;
<span style="color: #008080;">21</span> <span style="color: #ff0000;">    right</span>:<span style="color: #0000ff;"> -20%</span>;
<span style="color: #008080;">22</span> <span style="color: #ff0000;">    transform</span>:<span style="color: #0000ff;"> rotate(45deg)</span>;
<span style="color: #008080;">23</span> <span style="color: #ff0000;">    background-color</span>:<span style="color: #0000ff;"> white</span>;
<span style="color: #008080;">24</span> }