css實作div缺一個角的方法:1、建立一個HTML範例文件,並定義一個div;2、給div設定寬高背景色;3、為需要刪除一角的div增加一個偽類,將偽類設定成跟背景色一樣的顏色,然後旋轉45度,再定位到需要去除的那個角落即可。
本教學操作環境:Windows10系統、HTML5&&CSS3版、DELL G3電腦
css怎麼實作div缺一個角?
css實作缺少一角的div
先建一個div,設定寬高背景色後,給需要刪除一角的div增加一個偽類,將偽類設定成跟背景色一樣的顏色,然後旋轉45度,開啟定位,定位到需要去除的那個角就完成了(其實只是將那個角蓋住而已)
<body> <div class="box"></div> </body>
.box { position: relative; width: 200px; height: 200px; background-image: linear-gradient(90deg, #333333, #666666, #999999); overflow: hidden; &::before { position: absolute; content: ""; width: 100px; height: 100px; right: -50px; top: -50px; z-index: 100; background-color: #ffffff; transform: rotateZ(45deg); } }
效果圖:
推薦學習:《css影片教學》
以上是css怎麼實作div缺一個角的詳細內容。更多資訊請關注PHP中文網其他相關文章!