Berbagi teknologi

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

1. Gunakan pembatas untuk menggambar trapesium (isinya harus benar-benar diposisikan)

Bahasa HTML:

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

CSS-nya:

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

hasil:

2. Gunakan jalur klip untuk menggambar trapesium

Bahasa HTML:

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

CSS: Bahasa Indonesia

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

hasil:

Ekstensi: jalur klip

Atribut clip-path digunakan untuk menentukan area kliping suatu elemen untuk mengontrol bagian mana yang terlihat dan bagian mana yang disembunyikan. Ini memungkinkan Anda membuat bentuk pemotongan yang kompleks menggunakan fungsi dan parameter yang berbeda. Di CSS, properti clip-path dapat menggunakan fungsi berbeda untuk menentukan area kliping. Fungsi yang umum digunakan adalah sebagai berikut:

1. lingkaran(): Membuat area pemangkasan melingkar. Parameternya adalah jari-jari dan koordinat pusat lingkaran.
2. ellipse(): Membuat area kliping elips. Parameternya adalah jari-jari sumbu horizontal dan vertikal serta koordinat pusat lingkaran.
3. poligon(): Membuat area kliping poligonal. Parameternya adalah koordinat titik-titik yang membentuk poligon.
4. path(): Gunakan jalur SVG untuk menentukan area pemotongan. Argumennya adalah representasi string dari jalur.