CSS篇之实现多边形带阴影

这个一个非常哈

已于 2023-04-07 11:26:13 修改

阅读量394

点赞数 1

分类专栏： css 文章标签： css Powered by 金山文档

于 2023-03-01 15:26:50 首次发布

本文链接：https://blog.csdn.net/ae_pppppp/article/details/129282456

版权

css 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

开发中会有多边形的图片效果，一般我们都会让ui给切图，可是用css我们也可以大致实现效果

.aa{width: 500px; height: 230px;margin: 400px; box-shadow:0 0 6px 1px red;background: chartreuse;position: relative;}
      .aa:after{
         position: absolute;
         left: -35px;
         top: -13px;
         display: inline-block;
         content: " ";
         width: 101px;
         height: 58px;
         box-shadow: 8px -24px 8px -23px red inset;
         background: #fff;
         transform: rotate(-45deg);
         z-index: 2;
       }
       .aa:before{
         position: absolute;
         left: -35px;
         bottom: -13px;
         display: inline-block;
         content: " ";
         width: 101px;
         height: 58px;
         box-shadow: 8px -24px 8px -23px red inset;
         background: #fff;
         transform: rotate(-135deg);
         z-index: 2;
       }