CSS3形状のまとめ

今回は Css3 シェイプの概要について説明します。 Css3 シェイプを使用する際の 注意事項 は何ですか?実際の事例を見てみましょう。

1. アダプティブ楕円

境界半径機能:

• 水平半径と垂直半径を個別に指定でき、値はパーセンテージにすることができます。これら 2 つの値を区切るには / (スラッシュ) を使用するだけです。 (適応幅楕円を実装できます)。

• 4 つの異なる角度で水平半径と垂直半径を個別に指定することもできます (半楕円を実現できます)

• 4 分の 1 楕円、主に水平半径と垂直半径を調整します

サンプル コード:

.wrap{
            border-radius: 50% / 30%;
            width: 60px;
            height: 80px;
            background: yellow;
        }
        .wrap02{
            width: 60px;
            height: 80px;
            background: yellow;
            border-radius: 50% / 100% 100% 0 0;
        }
        .wrap03{
            width: 60px;
            height: 80px;
            background: yellow;
            border-radius: 100% 0 0 0;
        }

2. 平らな四角形

• 歪みのために変換の skewX に適用する必要があります

• 主な解決策は、コンテナが平らな四角形になり、内部のテキストと要素が垂直に表示されることです

• ネストされた要素、内部要素は、スキューを使用して逆にツイストできます。インライン要素には変換を適用できないため、ネストされた内部要素はブロックである必要があります。

• 歪みに疑似要素を使用します(:before)

.wrap{
            width: 80px;
            height: 40px;
            transform: skewX(-45deg);
            background: yellow;
        }
        .wrap>p{
            transform: skewX(45deg); 
        }
        .btn{
            position: relative;
            padding: 10px;
        }
        .btn:before{
            content: '';
            position: absolute;
            top: 0px;
            left: 0px;
            right: 0px;
            bottom: 0px;
            z-index: -1;
            background: #85a;
            transform: skewX(-45deg);
        }

三、ひし形

• 要素のネストを適用し、外側の要素と内側の要素が相互に回転して八角形を実現します形状;

• 画像全体が外側の p 全体のみを埋めることができるように、内部要素の最大幅を 100% に設計します。

• scale 属性は画像の倍率を制御します。中心点が拡大の原点であるということです (ピタゴラスの定理が使用されます。追加でtransform-originを指定しないでください)。

.wrap{
            width: 200px;
            transform: rotate(-45deg);
            overflow: hidden;
        }
        .wrap > img{
            transform: rotate(45deg) scale(1.42); 
            max-width: 100%;
        }

4. コーナーカット効果

• 線形グラデーションを使用すると、それを実現するための角度、複数の値、およびグラデーションの透明度を設定できます。

• 背景の重なりによって効果が有効にならないのを防ぐために、

  background-sizeとbackground-repeat属性の設定にも注意する必要があります

.wrap{
            width: 200px;
            height: 100px;
            background: #58a;
            background: linear-gradient(-135deg, transparent 15px, #58a 0px) top right,
            linear-gradient(135deg,transparent 15px, #655 0px) top left,
            linear-gradient(-45deg, transparent 15px, #58a 0px) bottom right, 
            linear-gradient(45deg, transparent 15px, #655 0px) bottom left;
            background-size: 50% 50%;
            background-repeat: no-repeat;
        }

• border-image を使用してコーナーカットを実現できます (画像の境界線は内側にオフセットされます)

• border-image は画像の幅を設定します。 + 透明度、さらに border-image-slice が内側にオフセットされます。 移動すると、角がカットされた境界線が作成されます。

• background-clip

  : これは、padding-box に設定する必要があります。そうしないと、背景が境界線まで拡張されます。

• .wrapSvg{
              border:15px solid transparent;
              border-image: 1 url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="3" height="3" fill="%2358a"><polygon points="0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2"/></svg>');
              margin-top: 50px;
              width: 200px;
              height: 100px; 
              background: #58a;
              background-clip: padding-box;
          }

  他の解決策

クリップパス属性を使用しますが、完全にはサポートされていません

• css4はコーナーカットをサポートするためにコーナーパス属性を直接与えます

• 5. 台形パターン

変換の基本原理を理解します

a と d はスケーリングを表し、0 にすることはできません; c と b は傾きを制御します; e と f は変位を制御します

translate (displacement): 行列 (1,0, 0,1 ,x,y)

• scale(scale): 行列(x,0,0,y,0,0);

• skew(skew): 行列(1,tany,tanx,1 ,0, 0)、入力は deg (角度) であるため、角度をラジアンに変換する必要があります

• rotate (回転):行列(cosN,sinN,-sinN,cosN,0,0)、角度ラジアンに変換されます

• 上記の値の適用は、位置決め要素の回転の原点であるtransform-originの値に関連しており、上、下、中心などの3つの座標が可能です。 x、y、z の系を指定できます

  perpective:透视，不可以负数，0或百分比，只能是数值；

  • 表示观察者到被观察物体的一段距离

  • 透视距离与物体越远，物体就会显得越小

  • 透视只能设置在变形元素的父级或祖先级，因为浏览器会为其子级的变形产生透视效果

  • 在3d变换上没有倾斜(skew)这个属性。 

  

  六、简单的饼图

  动画饼图，效果如下：

  

  实现步骤如下：

  画出一个yellowgreen的圆，并利用linear-gradient设置background-image的值，实现两种颜色各显示一半的功能：

  然后加入一个伪元素，继承父级（真实元素）的背景色，然后用rotate旋转即可

  • 要利用margin-left让其靠左

  • 利用transform-origin设置其旋转定位点

  动画展示代码如下：

  @keyframes spin{
              to{ transform: rotate(.5turn); }
          }
          @keyframes bg{
              50%{ background-color: #655; }
          }
          .wrap{
              width: 100px; height: 100px;
              border-radius: 50%;
              background: yellowgreen;
              background-image: linear-gradient(to right, transparent 50%, #655 0); 
          } 
          .wrap::before{
              content: '';
              display: block;
              margin-left: 50%;
              background-color: inherit;
              height: 100%; 
              border-radius: 0 100% 100% 0 / 50%;
              transform-origin: left;
              animation:spin 3s linear infinite,
                  bg 6s step-end infinite;
          }

  相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

  推荐阅读：

  单选、复选样式美化的图文详解
  

  CSS实现一级导航栏
  

  CSS实现书签图案的效果
  

以上がCSS3形状のまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。