Bagaimana untuk Mencipta Reben 45 Darjah Responsif dengan Sudut Dilipat Menggunakan CSS Tulen?

Mencipta Reben 45 Darjah Responsif dengan Sudut Dilipat

Adakah mungkin untuk mempunyai reben CSS berbentuk seperti sudut?

Menggunakan PNG imej ialah satu pilihan, tetapi ia tidak sesuai untuk responsif. Begini cara untuk menciptanya semata-mata dengan CSS:

<code class="css">.container {
  width: 200px;
  height: 150px;
  position: relative;
  display: inline-block;
  margin: 10px;
  background: lightblue;
}

.stack-top {
  --d: 5px;
  --g: 16px;
  --c: #333;

  position: absolute;
  top: 0;
  right: 0;
  transform: translate(29.29%, -100%) rotate(45deg);
  color: #fff;
  text-align: center;
  width: 100px;
  transform-origin: bottom left;
  padding: 5px 0 calc(var(--d) + 5px);
  background:
    linear-gradient(135deg, transparent var(--g), var(--c) calc(var(--g) - 0.3px)) left,
    linear-gradient(-135deg, transparent var(--g), var(--c) calc(var(--g) - 0.3px)) right;
  background-size: 51% 100%;
  background-repeat: no-repeat;
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    calc(100% - var(--d)) calc(100% - var(--d)),
    var(--d) calc(100% - var(--d)),
    0 100%
  );
}</code>

Menyesuaikan Reben

Anda boleh melaraskan pembolehubah berikut untuk menyesuaikan penampilan reben:

• -- d: Mengawal saiz lipatan sudut
• --g: Mengawal ketinggian puncak reben
• --c: Menentukan warna reben

Penggunaan

Untuk menggunakan reben, cuma tambahkan kod HTML berikut pada dokumen anda:

<code class="html"><div class="container">
  <div class="stack-top">1Month</div>
</div></code>

Anda juga boleh menentukan pembolehubah tersuai secara langsung dalam HTML dengan menggunakan atribut gaya, sebagai dilihat dalam contoh yang dikemas kini di bawah:

<code class="html"><div class="container">
  <div class="stack-top" style="--d: 0px; --g: 19px; width: 120px; --c: blue">1Month</div>
</div></code>

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Reben 45 Darjah Responsif dengan Sudut Dilipat Menggunakan CSS Tulen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!