CSS3是現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域中不可或缺的一部分，它能夠賦予網(wǎng)頁(yè)中的HTML元素各種炫酷的效果。其中，CSS3 div斜角是一種能夠讓頁(yè)面更具有立體感的效果。

div {
position: relative;
width: 200px;
height: 200px;
background-color: #008080;
}
div::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
right: 50%;
bottom: 0;
background-color: inherit;
transform-origin: right bottom;
transform: skew(-45deg);
}
div::after {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
left: 50%;
bottom: 0;
background-color: inherit;
transform-origin: left bottom;;
transform: skew(45deg);
}

上面的代碼是實(shí)現(xiàn)CSS3 div斜角效果的核心代碼。在HTML中，需要先定義一個(gè)div元素，并設(shè)置其寬高和背景顏色。接著，在CSS中通過(guò)偽元素“::before”和“::after”來(lái)分別定義兩條斜角線段。

在偽元素 "::before" 中，通過(guò)設(shè)置 "right:50%"，讓其占用div的一半寬度，接著設(shè)置元素的transform-origin，指定其旋轉(zhuǎn)變形的起點(diǎn)，再使用transform: skew(-45deg)來(lái)讓其傾斜。

在偽元素 "::after" 中，同樣設(shè)置了right和left屬性來(lái)填充div剩余的一半，然后也使用transform-origin和transform來(lái)進(jìn)行旋轉(zhuǎn)傾斜變形，并最終呈現(xiàn)出CSS3 div斜角的效果。