如何用HTML编写长方体框架,直角梯形长方体形状_html_开发99编程知识库

不需要額外的形狀元素

形狀可以創建僅包含該

:左側是創建的div left，top和bottom邊框。

右側是由 :before及其上，右和底部邊框

跨越加入兩個框創建的 :after感謝 skewY

Note的瀏覽器支持transform屬性。 ie 9 需要的 -ms-前綴以及Safari和Android瀏覽器要求 -webkit-.

運行示例不僅僅是形狀

CSS已緊縮和的邊框樣式偽元素繼承自div本身。

div {

border: solid 4px #000;

border-right-width: 0;

width: 100px;

height: 200px;

position: relative;

}

div:before,div:after {

content: '';

display: block;

height: 100%;

width: 100%;

border: inherit;

border-right-width: 4px;

border-left: none;

position: absolute;

left: 100%;<