CSS側直角梯形，即通過CSS代碼實現側面為直角的梯形形狀。該效果可以通過CSS的transform屬性和偽元素before和after實現。下面是實現該效果的CSS代碼：

.trapezoid {
position: relative;
width: 200px;
height: 0;
border-top: 50px solid red;
border-right: 100px solid transparent;
transform: skew(-20deg);
}
.trapezoid:before {
content: "";
position: absolute;
left: -50px;
top: -30px;
width: 50px;
height: 80px;
background-color: red;
transform: skew(20deg);
}
.trapezoid:after {
content: "";
position: absolute;
right: -100px;
top: -50px;
width: 100px;
height: 50px;
background-color: transparent;
border-top: 50px solid red;
border-left: 50px solid transparent;
transform: skew(20deg);
}

上面的代碼中，.trapezoid是給該梯形所在的元素添加的類名，該元素應同時具有border-top，border-right和transform屬性。偽元素:before和:after分別用于添加左側和右側的倒三角形。其中:before的寬度和高度必須要與border-right和border-top的值相同，可以通過transform屬性使得該元素在與.trapezoid元素同時傾斜20度的情況下垂直出現在左側。而:after則是利用border-top和border-left來實現倒三角形。

總之，通過這種方式可以通過使用純CSS代碼實現側面為直角的梯形形狀。這種形狀的效果常見于網頁設計中，可以用于制作價格表，卡片等組件。如果您想實現這樣的效果，不妨嘗試一下上面的代碼吧！