suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Biegen Sie den unteren Teil des Div mithilfe von CSS nach innen

<p>Ich möchte die Unterkante dieses rechteckigen Div/Hintergrunds mithilfe von CSS biegen, sodass das Ergebnis wie folgt aussieht: </p> <p> Weiß jemand, wie man es umsetzt? </p> <p> <pre class="brush:css;toolbar:false;">.curved { Rand: 0 automatisch; Höhe: 400px; Hintergrund: hellblau; Randradius:0 0 200px 200px; }</pre> <pre class="brush:html;toolbar:false;"><div class="container"> <div class="curved"></div> </div></pre> </p>
P粉617237727P粉617237727463 Tage vor478

Antworte allen(2)Ich werde antworten

  • P粉936568533

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

    检查一下。我用 :after 伪元素创建了这个。如果背景是纯色的话会很有帮助。

    .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>

    Antwort
    0
  • P粉564301782

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

    只需使用border-radius并依赖一些溢出。您还可以考虑伪元素以避免额外的标记:

    .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>

    Antwort
    0
  • StornierenAntwort