Bagaimana untuk Mencipta Reben Responsif dengan Sudut Dilipat menggunakan 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!