Résumé des formes sur les nouvelles fonctionnalités de CSS3

CSS3 est une version améliorée de CSS, qui comporte également de nombreuses nouvelles fonctionnalités. Cet article présente principalement le résumé des nouvelles fonctionnalités de CSS3. Il est d'une grande valeur pratique. J'espère que les amis qui en ont besoin pourront s'y référer. cela peut aider tout le monde.

1. Ellipse adaptative

Fonction de rayon de bordure :

• Vous pouvez spécifier les rayons horizontal et vertical séparément, et la valeur Il peut s'agir d'un pourcentage, utilisez simplement / (barre oblique) pour séparer les deux valeurs (une ellipse de largeur adaptative peut être implémentée).

• Vous pouvez également spécifier quatre rayons horizontaux et verticaux avec des angles différents (une demi-ellipse peut être réalisée)

• Quart d'ellipse, principalement pour ajustez le rayon horizontal et vertical

Exemple de code :

.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. Le quadrilatère plat

• doit être appliqué au skewX de la transformation pour la distorsion

• Le problème principal est que le Le conteneur devient un quadrilatère plat et l'intérieur. Le texte et les éléments sont affichés verticalement et les

• éléments imbriqués sont affichés verticalement. Les éléments internes peuvent être tordus à l'envers en utilisant l'inclinaison. Les éléments internes imbriqués doivent être bloqués car la transformation ne peut pas être appliquée aux éléments en ligne.

• Utiliser des pseudo-éléments pour la distorsion (:avant)

.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);
        }

3. Losange

• Appliquez l'imbrication des éléments, et les éléments extérieurs et intérieurs tournent les uns avec les autres pour obtenir un forme octogonale

• Concevez la largeur maximale de l'élément interne pour qu'elle soit de 100 %, de sorte que l'image entière ne puisse remplir que tout le p extérieur

• L'attribut scale contrôle le grossissement de son image Par défaut, le point central est l'origine du grossissement (le théorème de Pythagore sera utilisé, ne spécifiez pas d'origine de transformation supplémentaire).

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

4. Effet de coupe de coin

• En utilisant le dégradé linéaire, vous pouvez définir l'angle, les valeurs multiples et la transparence du dégradé pour y parvenir.

• Vous devez également faire attention aux paramètres des attributs background-size et background-repeat pour éviter que les arrière-plans qui se chevauchent n'empêchent l'effet de prendre effet

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

• Vous pouvez utiliser border-image pour réaliser une coupe de coin et définir la valeur de border-image -slice (la bordure de l'image est décalée vers l'intérieur) ;

• border-image utilise svg pour créer des images

• la bordure définit la largeur + la transparence, plus border-image-slice est décalé vers l'intérieur Cela crée une bordure coupée

• background-clip : défini sur padding-box, sinon l'arrière-plan s'étendra jusqu'à la bordure.

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

Autres solutions

• Exploitation de l'attribut clip-path, mais pas entièrement pris en charge

• css4 donnera directement l'attribut corner-path pour prendre en charge la coupe de coin

5. 🎜>Comprendre les principes de base de la transformation

a et d représentent la mise à l'échelle et ne peuvent pas être 0 ; c et b contrôlent l'inclinaison ; e et f contrôlent le déplacement

traduire (déplacement) : matrice(1,0,0,1,x,y)

• échelle (zoom) : matrice(x,0,0, y ,0,0);

• skew (skew): matrice(1,tany,tanx,1,0,0), puisque l'entrée est deg (angle), l'angle doit être Convertir en valeur radian

• rotation (rotation) : matrice (cosN, sinN,-sinN,cosN,0,0), angle converti en radian

• L'application des valeurs ci-dessus est liée à la valeur de transform-origin, qui est l'origine de la rotation de l'élément de positionnement, qui peut être haut, bas, centre, etc. Trois systèmes de coordonnées de x, y et z peuvent être spécifiés

perspective : Perspective, elle ne peut pas être négative, 0 ou pourcentage, elle ne peut être qu'une valeur numérique

représente un ; distance de l'observateur à l'objet observé

• Plus la distance de perspective est éloignée de l'objet, plus l'objet apparaîtra petit

• La perspective peut ne doit être défini que sur le parent ou l'ancêtre de l'élément déformé, car le navigateur produira un effet de perspective

• Il n'y a pas d'attribut d'inclinaison dans la transformation 3D.

6. Diagramme circulaire simple

Diagramme circulaire animé, l'effet est le suivant :

Les étapes de mise en œuvre sont les suivantes :

画出一个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;
        }

相关推荐：

关于图形形状的文章推荐

仅用CSS 创建各种不同的图形形状

使用CSS创建各种不同的图形形状的方法

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!