CSS كيفية عمل حد أو زاوية بشكل قطري في css

محمد لارافيل · 28 فبراير 2023

أريد أن أقوم بعمل مثل هذه الصورة

لدي الآن هذا الشكل
L2fBw.png.f1177096402f98b7f1a12b2df089a0e3.png
هذا الكود

<div id="block"> </div>

#block {
  width: 100%;
  height: 400px;
  background: #ccc;
  position: relative;
  margin-top: 100px;
}

#block:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-top: 80px solid #fff;
  border-right: 80px solid #ccc;
  width: 400px;
}

هل يمكنك مساعدتي؟

معاذ قره محمد · 28 فبراير 2023

أهلا بك

يمكنك فعل ذلك باستخدام svg باستخدام الكود التالي:

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 280.32 65.88">
            <defs>
                  <style> <!-- يمكنك استخدام الألوان التي تناسبك -->
                    .cls-1{fill:#2d2e83;}
                    .cls-2{fill:#ededed;}
              	</style> 
            </defs>
            <polygon class="cls-1" points="280.32 25.29 280.32 65.88 0 65.88 0 50.58 145.53 50.58 166.19 25.29 280.32 25.29"/>
            <polygon class="cls-2" points="166.19 25.29 145.53 50.58 0 50.58 0 0 145.53 0 166.19 25.29"/>
      </svg>