?

Demo下載??效果如圖：

css：

??? #box {
?? ??? ?width: 280px;
?? ??? ?height: 150px;
?? ??? ?background: #ff6565;
?? ??? ?padding: 20px;
?? ??? ?position: relative;
?? ??? ?overflow: hidden;
?? ?}
?? ?#content {
?? ??? ?width: 280px;
?? ??? ?height: 150px;
?? ??? ?background: #ffe765;
?? ?}
?? ?#shadow {
?? ??? ?width: 63px;
?? ??? ?height: 63px;
?? ??? ?position: absolute;
?? ??? ?transform: rotate(-45deg);
?? ??? ?top: -20px;
?? ??? ?left: -20px;
?? ??? ?background: url(shadow.png) no-repeat center bottom;
?? ?}
?? ?#shadow div {
?? ??? ?width: 63px;
?? ??? ?height: 60px;
?? ??? ?background: #ff6565;
?? ?}

html：

??? <div id="box">
?? ??? ?<div id="shadow"><div></div></div>
?? ??? ?<div id="content"></div>
?? ?</div>

?

轉載于:https://www.cnblogs.com/k13web/p/4139910.html

總結

以上是生活随笔為你收集整理的css斜角覆盖阴影的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。