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

Memiringkan Elemen dengan Sempadan Bulat Dalaman

Anda menyasarkan untuk meniru reka bentuk grafik menggunakan CSS, menampilkan elemen condong dengan sempadan bulat dalam. Walaupun anda telah mencapai versi statik menggunakan dua elemen, anda menghadapi cabaran untuk menjadikannya responsif.

Untuk mencipta kesan ini, mari gunakan satu elemen:

<code class="css">.header {
  border-top: 20px solid blue;
  height: 100px;
  position: relative;
  overflow: hidden;
}</code>

Kemudian, tambahkan :sebelum dan :selepas unsur pseudo untuk mencipta bentuk senget:

<code class="css">.header:before,
.header:after {
  content: "";
  vertical-align: top;
  display: inline-block;
  transform-origin: top right;
  transform: skew(-40deg);
}</code>

Untuk menggayakan jidar bulat dalam, laraskan unsur pseudo :sebelum:

<code class="css">.header:before {
  height: 100%;
  width: 50%;
  border-radius: 0 0 20px 0;
  background: blue;
}</code>

Akhir sekali , tambahkan kecerunan untuk sudut bulat dalam bahagian bawah sebelah kanan:

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

Pendekatan ini menggabungkan kefungsian dua elemen menjadi satu elemen, membolehkan tindak balas yang lebih mudah.

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