CSS样式斜切边

html部分

?<div class="rectangle"></div>

样式一：

? ? ? ? .rectangle {

? ? ? ? ? ? width: 251px;

? ? ? ? ? ? height: 75px;

? ? ? ? ? ? background:

? ? ? ? ? ? ? ? linear-gradient(-135deg, transparent 52px, #ffffff 0) top right;

? ? ? ? ? ? background-size: 100% 100%;

? ? ? ? ? ? background-repeat: no-repeat;

? ? ? ? ? ? background-color: bisque;

? ? ? ? }

---

样式二：

? ? ? ? .rectangle {

? ? ? ? ? ? width: 251px;

? ? ? ? ? ? height: 150px;

? ? ? ? ? ? background:

? ? ? ? ? ? ? ? linear-gradient(-135deg, transparent 52px, #ffffff 0) top right;

? ? ? ? ? ? background-size: 100% 100%;

? ? ? ? ? ? background-repeat: no-repeat;

? ? ? ? ? ? background-color: bisque;

? ? ? ? }

---

样式三：

? ? ? ? .rectangle {

? ? ? ? ? ? width: 305px;

? ? ? ? ? ? height: 75px;

? ? ? ? ? ? background:

? ? ? ? ? ? ? ? linear-gradient(-45deg, transparent 52px, #ffffff 0) bottom right,

? ? ? ? ? ? ? ? linear-gradient(-135deg, transparent 52px, #ffffff 0) top right;

? ? ? ? ? ? background-size: 100% 100%;

? ? ? ? ? ? background-repeat: no-repeat;

? ? ? ? }

---

样式四：

? ? ? ? .rectangle {

? ? ? ? ? ? width: 305px;

? ? ? ? ? ? height: 75px;

? ? ? ? ? ? background:

? ? ? ? ? ? ? ? linear-gradient(135deg, transparent 52px, #ffffff 0) top left,

? ? ? ? ? ? ? ? linear-gradient(45deg, transparent 52px, #ffffff 0) bottom left,

? ? ? ? ? ? ? ? linear-gradient(-45deg, transparent 52px, #ffffff 0) bottom right,

? ? ? ? ? ? ? ? linear-gradient(-135deg, transparent 52px, #ffffff 0) top right;

? ? ? ? ? ? background-size: 50% 50%;

? ? ? ? ? ? background-repeat: no-repeat;

? ? ? ? }

---

样式五：

? ? ? ? .rectangle {

? ? ? ? ? ? width: 305px;

? ? ? ? ? ? height: 75px;

? ? ? ? ? ? background:

? ? ? ? ? ? ? ? linear-gradient(135deg, transparent 0px, #ffffff 0) top left,

? ? ? ? ? ? ? ? linear-gradient(45deg, transparent 0px, #ffffff 0) bottom left,

? ? ? ? ? ? ? ? linear-gradient(-45deg, transparent 52px, #ffffff 0) bottom right,

? ? ? ? ? ? ? ? linear-gradient(-135deg, transparent 52px, #ffffff 0) top right;

? ? ? ? ? ? background-size: 50% 50%;

? ? ? ? ? ? background-repeat: no-repeat;

? ? ? ? }

样式六：

? ? ? ? .rectangle {

? ? ? ? ? ? width: 305px;

? ? ? ? ? ? height: 305px;

? ? ? ? ? ? background:

? ? ? ? ? ? ? ? linear-gradient(135deg, transparent 52px, #ffffff 0) top left,

? ? ? ? ? ? ? ? linear-gradient(45deg, transparent 52px, #ffffff 0) bottom left,

? ? ? ? ? ? ? ? linear-gradient(-45deg, transparent 52px, #ffffff 0) bottom right,

? ? ? ? ? ? ? ? linear-gradient(-135deg, transparent 52px, #ffffff 0) top right;

? ? ? ? ? ? background-size: 50% 50%;

? ? ? ? ? ? background-repeat: no-repeat;

? ? ? ? }

---

样式六：

?.rectangle {

? ? ? ? ? ? width: 305px;

? ? ? ? ? ? height: 305px;

? ? ? ? ? ? background:

? ? ? ? ? ? ? ? linear-gradient(135deg, transparent 52px, #e93030 150px) top left,

? ? ? ? ? ? ? ? linear-gradient(45deg, transparent 52px, #e93030 150px) bottom left,

? ? ? ? ? ? ? ? linear-gradient(-45deg, transparent 52px, #e93030 150px) bottom right,

? ? ? ? ? ? ? ? linear-gradient(-135deg, transparent 52px, #e93030 150px) top right;

? ? ? ? ? ? background-size: 50% 50%;

? ? ? ? ? ? background-repeat: no-repeat;

? ? ? ? }

样式七：

? ? ? ? .rectangle {

? ? ? ? ? ? width: 305px;

? ? ? ? ? ? height: 305px;

? ? ? ? ? ? background:

? ? ? ? ? ? ? ? linear-gradient(135deg, #e93030 150px, transparent 52px) top left,

? ? ? ? ? ? ? ? linear-gradient(45deg, ?#e93030 150px, transparent 52px) bottom left,

? ? ? ? ? ? ? ? linear-gradient(-45deg, ?#e93030 150px, transparent 52px) bottom right,

? ? ? ? ? ? ? ? linear-gradient(-135deg, ?#e93030 150px, transparent 52px) top right;

? ? ? ? ? ? background-size: 50% 50%;

? ? ? ? ? ? background-repeat: no-repeat;

? ? ? ? }

---

样式七 ：

? ? ? ? .rectangle {

? ? ? ? ? ? width: 305px;

? ? ? ? ? ? height: 305px;

? ? ? ? ? ? background:

? ? ? ? ? ? ? ? linear-gradient(135deg, transparent 52px, #ffffff 0,transparent 81px,#ffffff 0,transparent 107px,#ffffff 0) top left,

? ? ? ? ? ? ? ? linear-gradient(45deg, transparent 52px, #ffffff 0,transparent 81px,#ffffff 0,transparent 107px,#ffffff 0) bottom left,

? ? ? ? ? ? ? ? linear-gradient(-45deg, transparent 52px, #ffffff 0,transparent 81px,#ffffff 0,transparent 107px,#ffffff 0) bottom right,

? ? ? ? ? ? ? ? linear-gradient(-135deg, transparent 52px, #ffffff 0,transparent 81px,#ffffff 0,transparent 107px,#ffffff 0) top right;

? ? ? ? ? ? background-size: 50% 50%;

? ? ? ? ? ? background-repeat: no-repeat;

? ? ? ? }