效果实现案例1 - 林七七-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

效果实现案例1 - 林七七

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 21, 2016 am 08:35 AM

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

解释：

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代码如下：

<span style="color: #0000ff;"><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 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 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></span></span>

CSS代码如下：

<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> }

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

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？Mar 04, 2025 pm 12:32 PM

公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか？この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース（写真、CSS、JSなど）やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、