Technologieaustausch

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

1. Verwenden Sie den Rahmen, um ein Trapez zu zeichnen (der Inhalt muss absolut positioniert sein).

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

Ergebnis:

2. Verwenden Sie Clip-Path, um Trapeze zu zeichnen

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

Ergebnis:

Erweiterung: Clip-Pfad

Das Clip-Path-Attribut wird verwendet, um den Beschneidungsbereich eines Elements zu definieren und so zu steuern, welche Teile sichtbar und welche ausgeblendet sind. Es ermöglicht Ihnen, mithilfe verschiedener Funktionen und Parameter komplexe Zuschneideformen zu erstellen. In CSS kann die Clip-Path-Eigenschaft verschiedene Funktionen verwenden, um den Beschneidungsbereich zu definieren. Häufig verwendete Funktionen sind wie folgt:

1. Circle(): Erstellen Sie einen kreisförmigen Zuschneidebereich. Die Parameter sind der Radius und die Koordinaten des Kreismittelpunkts.
2. ellipse(): Erstellen Sie einen elliptischen Beschneidungsbereich. Die Parameter sind die Radien der horizontalen und vertikalen Achsen sowie die Koordinaten des Kreismittelpunkts.
3. polygon(): Erstellt einen polygonalen Beschneidungsbereich. Die Parameter sind die Koordinaten der Eckpunkte, aus denen das Polygon besteht.
4. path(): Verwenden Sie den SVG-Pfad, um den Zuschneidebereich zu definieren. Das Argument ist eine Zeichenfolgendarstellung des Pfads.