四面八方的切角造型我都能用CSS搞定

 2016-09-29 15:44

为了感时髦,我们有时也来尝试做些切角效果,最常见的是把元素的一个或多个角切掉,形成一个特殊的风格。我也尝试做了一个:

Next

单个或多个切角

其实做这个方法是运用了CSS渐变的原理,我们在前面的章节中已经提到过。如果我们想做一个单缺角,只要把需要的一个透明色标放在切角处就可以了:

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

很简单吧,为什么会有两个background?这是为了回退机制,如果浏览器不支持linear-gradient,那么就回到纯色无切角上。

如果我们想把两个角切掉呢?初步想法是再加一层:

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

但这个效果是错的,默认情况下,这两层渐变都会填满整个元素,因此它们会互相遮盖。我们需要让它们都缩小一些,于是我们会使用background-size让每层渐变分别只占据整个元素的一半的面积。

background:#448AFF;
background:linear-gradient(-45deg,transparent 15px,#448AFF 0) right,
    linear-gradient(45deg,transparent 15px,#448AFF 0) left;
background-size:50% 100%;

其实做这个方法是运用了CSS渐变的原理,我们在前面的章节中已经提到过。如果我们想做一个单缺角,只要把需要的一个透明色标放在切角处就可以了

我们发现,出现了这样的情况,原因是我们平铺了两次,通过background-repeat我们可以把重复给关掉。

background-repeat:no-repeat;

其实做这个方法是运用了CSS渐变的原理,我们在前面的章节中已经提到过。如果我们想做一个单缺角,只要把需要的一个透明色标放在切角处就可以了


成功做出了两个切角后,我们就可以扩展做出4个不同方位的切角了:


其实做这个方法是运用了CSS渐变的原理,我们在前面的章节中已经提到过。如果我们想做一个单缺角,只要把需要的一个透明色标放在切角处就可以了


background:#448AFF;
background:
    linear-gradient(135deg,transparent 15px,#512DA8 0) top left,
    linear-gradient(-135deg,transparent 15px,#D32F2F 0) top right,
    linear-gradient(-45deg,transparent 15px,#448AFF 0) bottom right,
    linear-gradient(45deg,transparent 15px,#00796B 0) bottom left;
background-size:50% 50%;
background-repeat:no-repeat;

弧形切角

这种切角是通过渐变的延伸来的,用径向渐变来替代线性渐变:

其实做这个方法是运用了CSS渐变的原理,我们在前面的章节中已经提到过。如果我们想做一个单缺角,只要把需要的一个透明色标放在切角处就可以了

background:#448AFF;
background:
    radial-gradient(circle at top left,transparent 15px,#448AFF 0) top left,
    radial-gradient(circle at top right,transparent 15px,#448AFF 0) top right,
    radial-gradient(circle at bottom right,transparent 15px,#448AFF 0) bottom right,
    radial-gradient(circle at bottom left,transparent 15px,#448AFF 0) bottom left;
background-size:50% 50%;
background-repeat:no-repeat;

当然,如果你嫌数据维护起来太大,那么也可以同样用mixin来改善下。


另外,书中还提到两个其他的方案:内嵌SVG与border-image方案和裁切路径方案,考虑兼容性和常用性的问题,我们这里也就不详细讲解了。大家如果有需要的可以自行阅读下。

作者头像

作者:紫铜炉

自由博主,网页设计师。我关注科技产品和个人博客发展,注重用户体验和界面优化。

 发表评论:

 评论列表

信心 2016-09-29  21:19

[/流汗]

信心 2016-09-29  21:19

[/惊讶]