如何使用CSS实现几何图形切角

发布时间:2022-03-01 09:23:13 作者:小新
来源:亿速云 阅读:323

这篇文章给大家分享的是有关如何使用CSS实现几何图形切角的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

实现一个角被切掉的效果,可以使用渐变,渐变接受一个角度作为方向,并且允许文字溢出并超出切角区域(因为它只是背景图案),具体实现如下:

div {

background: #58a;

background: linear-gradient(-45deg, transparent 15px, #58a 0);

}

效果如下:

如何使用CSS实现几何图形切角 CSS 绘制各种几何图形

实现两个切角的办法:

div {

width: 200px;

height: 100px;

background: #58a;

background: linear-gradient(-45deg, transparent 15px, #58a 0)

right, linear-gradient(45deg, transparent 15px, #65a

0) left;

background-size: 50% 100%;

background-repeat: no-repeat;

}

效果如下:

如何使用CSS实现几何图形切角

感谢各位的阅读!关于“如何使用CSS实现几何图形切角”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

推荐阅读:
  1. postgrep 获取几何图形相关信息
  2. css中使用::before绘制几何图形的方法

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css

上一篇:如何使用CSS实现响应式全屏背景图

下一篇:怎么实现localStorage的过期机制

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》