Bagaimana untuk Mencipta Elemen Serong dengan Sempadan Bulat Dalaman Menggunakan Elemen Tunggal dalam CSS?

Elemen Skew CSS dan Mencapai Bahagian Atas Sempadan Bulat Dalam

Mencapai reka bentuk responsif sambil mereplikasi reka bentuk grafik dalam CSS boleh memberikan cabaran, terutamanya apabila menangani elemen seperti bentuk senget dan sempadan bulat dalam. Dalam artikel ini, kami akan menangani isu khusus di mana pengguna ingin mencipta elemen dengan condong sebanyak -40deg dan jidar bulat dalam yang melilit elemen seperti butang berbentuk kekunci.

HTML dan CSS Asal

HTML yang disediakan mengandungi dengan

elemen:

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

CSS yang sepadan termasuk:

<code class="css">body > header > nav {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100vw;
  height: 90px;
  padding: 10px 0;
  text-align: center;
  z-index: 1
}
body > header > nav::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 80vw; height: 100%;
  background-color: rgb(147, 147, 147);
  border-bottom-right-radius: 15px;
  transform: skew(-40deg);
  transform-origin: 100% 0%;
}
body > header > nav::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 28.7%;
  border-top: 7px solid rgb(147, 147, 147);
  border-left: 50px solid rgb(147, 147, 147);
  height: 75px;
  border-top-left-radius: 75px;
  transform: skew(-33deg);
}</code>

Pendekatan ini menggunakan dua elemen untuk mensimulasikan bentuk senget dan jidar dalam. Walau bagaimanapun, pengguna mencari penyelesaian yang lebih mudah yang menghapuskan keperluan untuk berbilang elemen.

Pendekatan Alternatif dengan Elemen Tunggal

Untuk mencapai reka bentuk yang lebih bersih dan responsif, kita boleh menggunakan satu elemen dengan HTML dan CSS berikut:

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

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

Dalam pendekatan ini:

• Elemen .header berfungsi sebagai elemen tunggal dengan warna biru jidar atas pepejal, ketinggian 100px dan kedudukan relatif.
• Elemen pseudo :sebelum dan :selepas mencipta bentuk senget dan jidar bulat dalam.
• Jelmaan senget digunakan pada kedua-dua unsur pseudo.
• Unsur pseudo :before membentuk bentuk condong berwarna biru utama dengan jejari sempadan bawah kanan 20px.
• Unsur pseudo :selepas mencipta bahagian dalam jidar bulat, yang diletakkan sedikit ke kiri untuk peralihan yang lancar.

Kaedah ini membolehkan reka bentuk responsif kerana elemen boleh melaraskan saiz dan bentuknya secara automatik agar sesuai dengan port pandangan. Selain itu, penggunaan latar belakang kecerunan pada :after pseudo-element menghasilkan kesan sempadan dalaman yang licin.

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