CSS中怎么做缺角矩形效果，方法是哪些？

发布时间：2022-04-11 17:25:57 所属栏目：语言来源：互联网

导读：这篇文章给大家分享的是CSS中怎么做缺角矩形的效果，这里我们使用了background属性和linear-gradient()函数，具有一定的参考价值，因此分享给大家做个参考。文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。本教程操作

这篇文章给大家分享的是CSS中怎么做缺角矩形的效果，这里我们使用了background属性和linear-gradient()函数，具有一定的参考价值，因此分享给大家做个参考。文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。

    本教程操作环境：windows10系统、CSS3&&HTML5版、Dell G3电脑。

    css3怎样实现带边框的缺角矩形

    在css中，想要实现带边框的缺角样式，需要利用background属性和linear-gradient()函数。

    background属性用于设置元素的背景样式，

    linear-gradient()函数用于设置元素的线性渐变样式，只需要这只线性渐变的角度和渐变颜色，就能够将矩形元素设置为缺角的样式。

    这时候元素虽然缺角，但是不能使用border样式直接加边框，因为元素只是背景样式便为了缺角的样子，边框仍然是矩形的样式。

    我们可以将相同方向的缺角矩形，小的缺角矩形元素放置在大的缺角矩形元素里即可。

    示例如下：

</title>
    <style>
.box{
    width: 100px;
    height: 60px;
    padding: 4px;
  background:linear-gradient(135deg,transparent 10px,#2baaca 0);
}
.box_inner{
  width: 100%;
    height: 100%;
    background: linear-gradient(135deg, transparent 9px, #fff 0);
}
    </style>
</head>
<body>
<div class="box">
    <div class="box_inner"></div>

（编辑：应用网_丽江站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

类关系记忆秘诀	Makefile中另外的常用
矩阵稀疏矩阵压缩存	Java访问控制修饰符详