Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk Mencipta Reben Responsif dengan Sudut Dilipat menggunakan CSS?

Bagaimana untuk Mencipta Reben Responsif dengan Sudut Dilipat menggunakan CSS?

DDD
DDDasal
2024-10-31 02:33:02895semak imbas

How to Create a Responsive Ribbon with a Folded Corner using CSS?

Mencipta Reben Responsif dengan Sudut Dilipat menggunakan CSS

Mencipta reben CSS dengan sudut berlipat boleh dicapai menggunakan beberapa kaedah. Satu pendekatan ialah melaksanakannya dengan HTML dan CSS seperti berikut:

<code class="css">.container {
  width: 200px;
  height: 200px;
  position: relative;
  margin: 20px;
  overflow: hidden;
}

.box {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.8; /* for demo purpose */
}

.stack-top {
  height: 30px;
  z-index: 9;
  margin: 40px; /* for demo purpose */
  transform: rotateY(0deg) rotate(45deg); /* needs Y at 0 deg to behave properly*/
  transition: transform 2s;
  color: #fff;
}</code>
<code class="html"><div class="container">
  <div class="box" style="background: #fffff3;"></div>
  <div class="box stack-top" style="background: #242424;">      1Month</div>
</div></code>

Kaedah ini mencipta reben asas dengan bentuk pepenjuru. Walau bagaimanapun, jika anda memerlukan fleksibiliti yang lebih besar dalam bentuk dan responsif, pertimbangkan untuk menggunakan penjana pra-bina seperti ini: https://css-generators.com/ribbon-shapes/. Penjana ini menawarkan pilihan yang boleh disesuaikan untuk mencipta pelbagai bentuk reben dengan sifat reka bentuk responsif.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Reben Responsif dengan Sudut Dilipat menggunakan 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