Rumah  >  Soal Jawab  >  teks badan

Lengkung bahagian bawah div ke dalam menggunakan CSS

<p>Saya mahu membengkokkan tepi bawah div/latar belakang segi empat tepat ini menggunakan CSS, jadi hasilnya seperti ini: </p> <p> Adakah sesiapa tahu bagaimana untuk melaksanakannya? </p> <p> <pre class="brush:css;toolbar:false;">.curved { margin: 0 auto; ketinggian: 400px; latar belakang: biru muda; jejari sempadan:0 0 200px 200px; }</pre> <pre class="brush:html;toolbar:false;"><div class="container"> <div class="curved"></div> </div></pre> </p>
P粉617237727P粉617237727444 hari yang lalu465

membalas semua(2)saya akan balas

  • P粉936568533

    P粉9365685332023-08-25 15:27:24

    Lihatlah. Saya mencipta ini menggunakan :after pseudo-element. Ia membantu jika latar belakang adalah warna pepejal.

    .curved {
      margin: 0 auto;
      width: 300px;
      height: 300px;
      background: lightblue;
      position: relative;
    }
    .curved:after{
      background: white;
      position: absolute;
      content: "";
      left:0;
      right:0;
      bottom: -25px;
      height: 50px;
      border-radius: 50% 50% 0 0;
    }
    <div class="container">
      <div class="curved"></div>
    </div>

    balas
    0
  • P粉564301782

    P粉5643017822023-08-25 10:20:51

    Hanya gunakan border-radius dan bergantung pada limpahan. Anda juga boleh mempertimbangkan elemen pseudo untuk mengelakkan markup tambahan:

    .container {
      margin: 0 auto;
      width: 500px;
      height: 200px;
      background: lightblue;
      position: relative;
      overflow: hidden;
    }
    
    .container:after {
      content: "";
      position: absolute;
      height: 80px;
      left: -10%;
      right: -10%;
      border-radius: 50%;
      bottom: -25px;
      background: #fff;
    }
    <div class="container">
    </div>

    balas
    0
  • Batalbalas