欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

css長方形一邊斜角

夏志豪2年前9瀏覽0評論

CSS可以實現各種各樣的形狀效果,其中經常被用到的一種形狀就是“一邊斜角”的長方形,下面就來介紹如何實現。

.box {
width: 200px;
height: 100px;
background-color: #333;
position: relative;
}
.box::before {
content: "";
position: absolute;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-right: 50px solid #333;
top: 0;
left: -50px;
}

如上所示,我們先定義一個長方形的盒子,然后使用偽元素:before來創建一個三角形,利用邊框顏色和盒子背景色相同來隱藏已經超出邊框范圍的部分,使其成為一個斜角。具體來說,我們給三角形設置一個寬度為0,高度為0的矩形,并設置三個邊框:上下各50px的透明邊框,右側50px的與盒子背景色相同的實色邊框,然后定位到盒子的左側,垂直與頂部對齊即可。

這樣,我們就實現了一個帶有斜角的長方形,當然,如果需要對斜角的角度、寬度等進行調整,只需對:before中的邊框寬度進行修改即可。