Bagaimana untuk Mencipta Elemen Serong dengan Bahagian Atas Sempadan Bulat Dalaman Menggunakan CSS?

Elemen Skew CSS dan Mencapai Bahagian Atas Sempadan Bulat Dalam

Dalam reka bentuk web, mungkin sukar untuk meniru elemen grafik kompleks dengan ketepatan dan responsif menggunakan CSS. Satu cabaran sedemikian ialah mencipta elemen senget dengan bahagian atas sempadan bulat dalam.

Mentakrifkan Struktur HTML

Pertama, mari kita tentukan struktur HTML:

<code class="html"><header>
  <nav></nav>
</header></code>

Melaksanakan CSS

Untuk menyerong elemen dan menambah bahagian atas sempadan bulat dalam, kami akan menggunakan CSS berikut:

<code class="css">.header {
    border-top: 20px solid blue;
    height:100px;
    position: relative;
    overflow: hidden;
}
.header:before,
.header:after {
    content: "";
    vertical-align:top;
    display: inline-block;
    transform-origin: top right;
    transform: skew(-40deg);
}

.header:before {
    height: 100%;
    width: 50%;
    border-radius: 0 0 20px 0;
    background: blue;
}

.header:after {
    height: 20px;
    width: 20px;
    margin-left:-1px;
    background: radial-gradient(circle at bottom right, transparent 68%, blue 73%);
}</code>

CSS ini mencipta elemen senget yang berfungsi sebagai asas untuk bahagian atas sempadan bulat dalam. Elemen pseudo :before mengisi kawasan biru dengan sudut bulat, manakala elemen pseudo :selepas menambah kesan kecerunan jejari untuk mencipta sempadan dalam.

Menggabungkan Skew dan Sempadan Dalam

Dengan menggabungkan elemen senget dan sempadan dalam, kami mencapai kesan yang diingini:

<code class="css">.header {
    border-top: 20px solid blue;
    height:100px;
    position: relative;
    overflow: hidden;
}
.header:before {
    content: "";
    vertical-align:top;
    display: inline-block;
    transform-origin: top right;
    transform: skew(-40deg);
    height: 100%;
    width: 50%;
    border-radius: 0 0 20px 0;
    background: blue;
}
.header:after {
    content: "";
    vertical-align:top;
    display: inline-block;
    transform-origin: top right;
    transform: skew(-40deg);
    height: 20px;
    width: 20px;
    margin-left:-1px;
    background: radial-gradient(circle at bottom right, transparent 68%, blue 73%);
}</code>

Kaedah ini membolehkan kami mencipta elemen responsif dengan kedua-dua bentuk senget dan bulat dalam atas sempadan tanpa memerlukan pelbagai elemen. Pendekatan ini menawarkan lebih fleksibiliti dan kemudahan pelaksanaan.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Elemen Serong dengan Bahagian Atas Sempadan Bulat Dalaman Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!