جار التحديث ...
جار التحديث ...

هل يمكن عمل بوردر زيغ-زاغ باستخدام css و html ?

  • 0

اريد عمل بوردر زيغ-زاغ كما في الصور لعنصر في موقعي , هل من الممكن عمل ذلك باستخدام css - html فقط ؟

إجابات المستخدمين (2)


  • عضو أكاديمي
  • قديم العهد
  • قبل أشهر 10
<!DOCTYPE html>
<html>
<head></head>
<body>

<div class="container">
    <h1>Content Here</h1>
</div>


</body>
</html>

css

.container {
    position: relative;
    padding: 8px 8px 32px 8px;
    background: #dddccf;
}

.container:after {
    background: linear-gradient(-45deg, #ffffff 16px, transparent 0), linear-gradient(45deg, #ffffff 16px, transparent 0);
    background-position: left-bottom;
    background-repeat: repeat-x;
    background-size: 32px 32px;
    content: " ";
    display: block;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 32px;
}

 

 

يمكنك البحت عن اي كود جاهز من خلال موقع CodePen


  • 0
رد على التعليق (0)

الردود :


لا يوجد ردود بعد


سجل الدخول لاضافة رد

نعم من الممكن عمل ذلك , باستخدام HTML , CSS فقط لكن تحتاج العملية لخدعة صغيرة وسهلة

 

<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

و كود ال CSS يكون كالتالي

.container {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
}

.container>div {
    display: inline-block;
    width: 0;
    border: 24px transparent solid;
    border-bottom: 24px blue solid;
}

  • 0
رد على التعليق (0)

الردود :


لا يوجد ردود بعد


سجل الدخول لاضافة رد
سجل الدخول لاضافة اجابة جديدة