Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk Mencipta Elemen Serong dengan Sempadan Bulat Dalaman dalam CSS?

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

Linda Hamilton
Linda Hamiltonasal
2024-10-31 00:58:29106semak imbas

How to Create a Skewed Element with an Inner Rounded Border in 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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn