# 纯CSS斜切角实现

斜切角在Web设计和印刷中是相当受欢迎的样式。它通常是在一个或多个元素的角落切一个45°的角（也就是所谓的斜切角）。特别是最近，扁平化设计的势头压过了拟真设计，也使这种效果更加流行。当斜切角只存在元素的一侧，并且每个都占据元素的50%高度的时候，一个箭头的形状产生了，这在按钮和面包屑导航中非常受欢迎。著作权归作者所有。

原文: <https://www.w3cplus.com/css3/css-secrets/cutout-corners.html> © w3cplus.com

![](https://4236962461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LI4XIh9ljNl7vLDogAQ%2F-LI4XSJWR6h8WVO802xk%2F-LI4X_9F7lTtc9cH7A3e%2Fdeg.png.png?generation=1532322535646931\&alt=media)

## 传统方法：使用border-weight，产生夹角形成三角形

**优点**：实现原理简单易懂，起来也比较方便，浏览器兼容性也比较高 **缺点**：要想想要实现图上的箭头图形，块元素的高度要设置为0 ，因此，块元素只能作为单纯的显示，里面不能再有文字或者内容，很多情况下不能满足需要。

## 参考于《CSS揭秘》一书

使用`background`结合img的`linear-gradient`线性渐变函数组合完成。

### `linear-gradient`介绍

一开始看到这个函数写到CSS里面的时候有的懵逼，对这个函数几乎没有什么印象，所以去查阅了一下：[`linear-gradient`函数介绍](https://developer.mozilla.org/zh-CN/docs/Web/CSS/linear-gradient) 讲道理说这个函数的一般用法还是比较简单的

```
/* 渐变轴为45度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);

/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);

/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);
```

语法：

```
linear-gradient([ [ [ <angle> | to [top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);
```

参数：

* `<side-or-corner>`描述渐变线的起始点位置。它包含两个关键词：第一个指出垂直位置left or right，第二个指出水平位置top or bottom。关键词的先后顺序无影响，且都是可选的。

  &#x20; to top, to bottom, to left 和 to right这些值会被转换成角度0度、180度、270度和90度。其余值会被转换为一个以向顶部中央方向为起点顺时针旋转的角度。渐变线的结束点与其起点中心对称。
* `<angle>`用角度值指定渐变的方向（或角度）。角度顺时针增加。
* `<color-stop>`由一个值组成，并且跟随着一个可选的终点位置（可以是一个百分比值或者是沿着渐变轴的），可以有多个color值，表示渐变中的颜色节点。CSS渐变的颜色渲染采取了与SVG相同的规则。

简单点来讲就是`<side-or-corner>`和`<angle>`这两个是描述方向的，任选其一，第一个比较通俗易懂，第二个角度值需要转换一下。 这边有一张手绘图，方便里面理解一下

![](https://4236962461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LI4XIh9ljNl7vLDogAQ%2F-LI4XSJWR6h8WVO802xk%2F-LI4X_9K2pEfWvxK2EDt%2Fdeg-tips.png?generation=1532322535869137\&alt=media)

### `radial-gradient()`介绍

[`radial-gradient()`介绍](https://developer.mozilla.org/zh-CN/docs/Web/CSS/radial-gradient)

用法相近，这里不再叙述

## 正题

直接上代码

![](https://4236962461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LI4XIh9ljNl7vLDogAQ%2F-LI4XSJWR6h8WVO802xk%2F-LI4X_9MLYXAOkyxE6o3%2Fdeg1.png?generation=1532322536288243\&alt=media)

```css
<style type="text/css">
    .example1 {
        display: inline-block;
        margin-right: 50px;
        width: 200px;
        height: 70px;
        background: #58a;
        background:
                    linear-gradient(45deg, transparent 25px, #58a 0)bottom left  ,
                    linear-gradient(-45deg, transparent 25px, #58a 0)bottom right,
                    linear-gradient(-135deg, transparent 25px, #58a 0)top right  ,
                    linear-gradient(135deg, transparent 25px, #58a 0)top left  ;
        background-size: 51% 51% ;
        background-repeat: no-repeat;
    }
</style>
```

博文上有一个循序渐进的过程，不懂的可以直接看原文，这里直接说几个注意点：

* `linear-gradient`函数多个执行完之后后面的执行效果会视第一个执行的权重最高，例如：如果作用区域相同，则后面函数作用之后的效果会被第一个覆盖。
* 因为会被覆盖，所以选择使用background-position和background-size结合起来使用，让想要显示作用效果的区域定位到可视区中。这会根据需要定义。后面会给出集中常见的需求定位
* 为了使`linear-gradient`不产生渐变效果，首先要先给整个块元素给一个初始的background-color，然后在color-stop位置通过对渐变位置的控制实现直接切角。

  例子中第一个函数，从45°角的垂直方向实现渐变，第一个渐变位置便是块元素的右下角，然后在垂直方向开始渐变，第一个颜色是纯色transparent，长度为25px长度，所以到25px之间这段距离的区域全部都是纯色，第二种颜色就是背景色，长度是0，所以除了刚刚25px内的纯色，其他的都是背景色填充，其实这个长度0-25任意一个值都可以，因为都在一个渐变色的区域内，如果大于25px，则会在纯色和背景色之间进行渐变。

接下来为了比较准确的解释这个，用一个例子说明&#x20;

![](https://4236962461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LI4XIh9ljNl7vLDogAQ%2F-LI4XSJWR6h8WVO802xk%2F-LI4X_9PKmQ_LnMjqyCg%2Fdeg-length.png?generation=1532322535661502\&alt=media)

* 如果想要文章开头的那种图片效果，渐变的长度应该为块元素高度除以根号2。
* 还有一个坑就是想要对称的两个角或者对称的四个角都有这个切角效果，使用了`background-size: 50% 50% ;`,这个计算如果块元素高度为复数时，没有什么问题，但是为奇数时，50%的计算会有小数，然后再计算之后约去小数部分，在元素高度小于2倍的渐变长度根号2倍时，导致中间部分会有一条缝。

![](https://4236962461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LI4XIh9ljNl7vLDogAQ%2F-LI4XSJWR6h8WVO802xk%2F-LI4X_9RFmjH3Oihh6Xk%2Fdeg2.png?generation=1532322536279177\&alt=media)

\*

* 在使用中，注意适配浏览器，在原文中有说到
* 如果能使用scss、sass、stylus等预编译器，可以将渐变函数写到预处理器中，颜色，长度设为变量，统一改变

  **几个常用的例子**

![](https://4236962461-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LI4XIh9ljNl7vLDogAQ%2F-LI4XSJWR6h8WVO802xk%2F-LI4X_9T0gSTeaevnzp3%2Fdeg-example.png?generation=1532322536294824\&alt=media)

代码地址：[github](https://github.com/Xia-Ao/FrontendDemo/blob/master/30-CSS/11-background/chamfered-corners.html)

1. 四个斜切角，上面的例子
2. 左箭头
3. 右箭头
4. 四角缺口
5. 单角折口
6. 单角缺口

### 总结

其实写到后面觉得这个方法非常强大，理解了原理之后可以根据功能实现各种各样的CSS特效。

如果有必要的话，可以好好的买一本《CSS秘密花园》


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://xia-ao.gitbook.io/notes/yu-yan/css/xie-qie-jiao-shi-xian.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.