关注互联网应用及运维技术的个人博客

通过使用css实现折角的前端效果

如上图的效果,主要是使用渐变实现折角效果:linear-gradient

css代码:

            div {
                width: 250px;
                height: 250px;
                background: green;
                background: linear-gradient(-135deg, transparent 2em, green 0);
            }

折右上角:background: linear-gradient(-135deg, transparent 2em, green 0);
折左上角:background: linear-gradient(135deg, transparent 2em, green 0);
折左下角:background: linear-gradient(45deg, transparent 2em, green 0);

这个效果折出来的部分是被剪掉的,一下代码将折叠部分显示出来:

            div {
                width: 250px;
                height: 250px;
                background: green;
                background:
                    linear-gradient(to left bottom, transparent 50%, rgba(255, 255, 255, .9) 0) 100% 0 no-repeat,
                    linear-gradient(-135deg, transparent 1.5em, green 0);
                background-size: 2em 2em, auto;
            }

效果如下图:

以上是折45°的角。

折一个30°的角:

            div {
                width: 250px;
                height: 250px;
                background: green;
                background: linear-gradient(-150deg, transparent 1.5em, green 0);
                position: relative;
            }

            div::before {
                content: '';
                position: absolute;
                top: 0;
                right: 0;
                width: 1.73em;
                height: 3em;
                background: linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, 0.4)0, rgba(0, 0, 0, 0.8)) 100% 0 no-repeat;
                transform: translateY(-1.3em)rotate(-30deg);
                transform-origin: bottom right;
            }
赞(0)
未经允许不得转载:飞天狒狒 » 通过使用css实现折角的前端效果

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址