إنشاء زاوية مائلة في مربع CSS

يمكن تحقيق زاوية مائلة في مربع CSS باستخدام طرق مختلفة. يتم وصف إحدى الطرق أدناه:

طريقة استخدام الحدود

تعتمد هذه التقنية على إنشاء حد شفاف على طول الجانب الأيسر من الحاوية وحد مائل على طول الجزء السفلي . توضح التعليمة البرمجية التالية كيفية تنفيذ ذلك:

Hello World

.cornered {
  width: 160px;
  height: 0px;
  border-bottom: 40px solid red;
  border-right: 40px solid white;
}
.main {
  width: 200px;
  height: 200px;
  background-color: red;
}

طريقة بديلة باستخدام الشفافية

  
It's possible to put text up here too
    but if you want it to follow the slant you have to stack
    several of these.
  
Hello hello hello hello
hello hello hello hello hello

.outer {
    background-color: #ccffff;
    padding: 10px;
    font-size: x-small;
}
.cornered {
    width: 176px;
    height: 0px;
    border-bottom: 40px solid red;
    border-left: 40px solid transparent;
}
.main {
    width: 200px;
    height: 200px;
    background-color: red;
    padding: 0 8px;
}