Partage de technologie

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

1. Utilisez la bordure pour dessiner un trapèze (le contenu doit être positionné de manière absolue)

HTML:

//左边斜边
<div class="t">
    <div class="f"></div>
</div>
//右边斜边
<div class="t2">
    <div class="f"></div>
</div>

CSS:

.t{
    position: relative;
    width: 277.5px;
    height: 35px;
    border-right: 19px solid transparent;
    border-bottom: 35px solid #4B75FF;
}
 
.f{
    position: absolute;
    bottom: 0;
}
.t2{
    position: relative;
    width: 277.5px;
    height: 35px;
    border-left: 19px solid transparent;
    border-top: 35px solid #4B75FF;
}

résultat:

2. Utilisez le chemin de clip pour dessiner des trapèzes

HTML :

<div class="card-info_s3-bottom_cc_left">
</div>

CSS :

.card-info_s3-bottom_cc_left{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    font-size: 13px;
    color: #ffffff;
    width: 277.5px;
    height: 35px;
    padding-left: 26px;
    clip-path:polygon(0 0,258.5px 0px,277.5px 35px,0px 35px);
    background-color: #4B75FF;
    border-bottom-left-radius: 12px;
    border-top-right-radius: 30px;
}

résultat:

Extension : chemin de détourage

L'attribut clip-path est utilisé pour définir la zone de découpage d'un élément afin de contrôler quelles parties sont visibles et quelles parties sont masquées. Il vous permet de créer des formes de recadrage complexes en utilisant différentes fonctions et paramètres. En CSS, la propriété clip-path peut utiliser différentes fonctions pour définir la zone de découpage. Les fonctions couramment utilisées sont les suivantes :

1. circle() : Créez une zone de recadrage circulaire. Les paramètres sont le rayon et les coordonnées du centre du cercle.
2. ellipse() : crée une zone de découpage elliptique. Les paramètres sont les rayons des axes horizontal et vertical et les coordonnées du centre du cercle.
3. polygon() : Créez une zone de découpage de polygone. Les paramètres sont les coordonnées des sommets qui composent le polygone.
4. path() : utilisez le chemin SVG pour définir la zone de recadrage. L'argument est une représentation sous forme de chaîne du chemin.