CSS篇之实现多边形带阴影

原创

已于 2023-04-07 11:26:13 修改 · 596 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

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

本文介绍了如何利用CSS的盒阴影、旋转和定位属性，来创建出类似多边形的图片效果，从而减少对UI设计师切图的依赖。

开发中会有多边形的图片效果，一般我们都会让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