ホームページ > 記事 > ウェブフロントエンド > css3の新機能に関する図形のまとめ

css3の新機能に関する図形のまとめ

小云云オリジナル: 2017-12-22 16:53:491580ブラウズ

css3 は CSS のアップグレード版であり、多くの新機能も備えています。この記事では主に CSS3 の新機能の概要を紹介します。これは、CSS を必要とする友人が参照できることを願っています。みんなを助けて。

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に適用する必要があります
主な問題は、コンテナが平らな四角形になり、内部のテキストと要素は垂直に表示されます
埋め込まれた Set 要素を使用し、内部要素を逆にひねるにはスキューを使用します。インライン要素には変換を適用できないため、ネストされた内部要素はブロックである必要があります。
歪みに擬似要素を使用する(:before)

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

3. ひし形

要素のネストを適用し、外側の要素と内側の要素は一緒に回転します相互に、八角形の形状を実現します。
画像全体が外側の 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-slice の値 (画像の境界線は内側にオフセットされます)
border-image は svg を使用して画像を作成します
border は、幅 + 透明度、および border-image を設定します。 -slice は内側にオフセットされます。これにより、コーナーカットのある境界線が作成されます。
background-clip:padding-box に設定する必要があります。そうでない場合、背景が境界線まで拡張されます。

.wrapSvg{
            border:15px solid transparent;
            border-image: 1 url(&#39;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>&#39;);
            margin-top: 50px;
            width: 200px;
            height: 100px; 
            background: #58a;
            background-clip: padding-box;
        }

その他の解決策

clip-path属性を使用しますが、完全にはサポートされていません
css4はコーナーカットをサポートするためにcorner-path属性を直接与えます

5台形パターン

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

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

translate (displacement): ,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の値に関連しています。これは、上、下、中央にすることができます。 x、y、z の 3 つの座標系を指定できます

perspective:Perspective、負、0、またはパーセントにすることはできません。数値のみを指定できます。

は、観測者から距離を表します。観察されたオブジェクト
遠近距離がオブジェクトから離れるほど、オブジェクトは小さく表示されます
遠近感は、ブラウザが遠近効果を生成するため、変形された要素の親または祖先にのみ設定できます
3D 変換にはスキュー属性はありません。

6. シンプルな円グラフ

アニメーション円グラフ、効果は次のとおりです:

実装手順は次のとおりです:

画出一个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: &#39;&#39;;
            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;
        }

css3の新機能に関する図形のまとめ

関連記事