css怎麼實作div缺一個角
- 藏色散人原創
- 2023-01-30 09:23:392529瀏覽
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中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：es6的6種變數定義方法是什麼下一篇：es6的6種變數定義方法是什麼