Κοινή χρήση τεχνολογίας

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

1. Χρησιμοποιήστε περίγραμμα για να σχεδιάσετε ένα τραπέζιο (το περιεχόμενο πρέπει να είναι απολύτως τοποθετημένο)

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

αποτέλεσμα:

2. Χρησιμοποιήστε τη διαδρομή κλιπ για να σχεδιάσετε τραπεζοειδή

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

αποτέλεσμα:

Επέκταση: clip-path

Το χαρακτηριστικό clip-path χρησιμοποιείται για να ορίσει την περιοχή αποκοπής ενός στοιχείου για να ελέγξει ποια μέρη είναι ορατά και ποια μέρη είναι κρυφά. Σας επιτρέπει να δημιουργείτε περίπλοκα σχήματα περικοπής χρησιμοποιώντας διαφορετικές λειτουργίες και παραμέτρους. Στο CSS, η ιδιότητα clip-path μπορεί να χρησιμοποιεί διαφορετικές συναρτήσεις για να ορίσει την περιοχή αποκοπής. Οι λειτουργίες που χρησιμοποιούνται συνήθως είναι οι εξής:

1. circle(): Δημιουργήστε μια κυκλική περιοχή περικοπής. Οι παράμετροι είναι η ακτίνα και οι συντεταγμένες του κέντρου του κύκλου.
2. ellipse(): Δημιουργήστε μια ελλειπτική περιοχή αποκοπής. Οι παράμετροι είναι οι ακτίνες του οριζόντιου και του κατακόρυφου άξονα και οι συντεταγμένες του κέντρου του κύκλου.
3. polygon(): Δημιουργήστε μια πολυγωνική περιοχή αποκοπής. Οι παράμετροι είναι οι συντεταγμένες των κορυφών που αποτελούν το πολύγωνο.
4. path(): Χρησιμοποιήστε τη διαδρομή SVG για να ορίσετε την περιοχή περικοπής. Το όρισμα είναι μια παράσταση συμβολοσειράς της διαδρομής.