# CSS画三角形

## 利用border

一个正常的矩形是下面这样的

![](https://3490195898-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LnQxDcxCKODvYvTUWe3%2F-LwkVJV6hnw4C6BeT4xu%2F-LwkaoNQhgWtzFuLHbgD%2Fimage.png?alt=media\&token=e893b495-a672-4554-a78d-eebde54f6b35)

当这样设置时，能得到一个梯形

```css
border-color: transparent transparent rgb(0,0,0) transparent;
border-width: 10px 10px 10px 10px
```

![](https://3490195898-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LnQxDcxCKODvYvTUWe3%2F-LwkVJV6hnw4C6BeT4xu%2F-LwkbhB1pNa1S4d5dKLs%2Fimage.png?alt=media\&token=5683cdf2-dc1e-4a43-b52a-b3b309d88b1b)

当把div的宽度缩小为0时，三角形就会出来

```javascript
border-color: transparent transparent rgb(0,0,0) transparent;
border-width: 10px 100px 150px 100px;
width: 0px;
```

![](https://3490195898-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LnQxDcxCKODvYvTUWe3%2F-LwkVJV6hnw4C6BeT4xu%2F-LwkcUUCf9009f_R0S26%2Fimage.png?alt=media\&token=6027c7ff-69f5-41be-b9c0-c88a343ff8ef)

不同的border-width控制了三角形的形状，设置如下的css可以生成直角三角形

```css
border-color: transparent transparent rgb(0,0,0) transparent;
border-width: 10px 0px 150px 100px;
width: 0px;
```

![](https://3490195898-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LnQxDcxCKODvYvTUWe3%2F-LwkVJV6hnw4C6BeT4xu%2F-LwkdhRcdhDMXkB0fGmO%2Fimage.png?alt=media\&token=7fe034af-bb94-4b52-b721-24ad6a4b95be)

## 利用skew()

```css
<style>
.city {
  display: inline-block;
  padding: 5px 20px;
  border: 1px solid #44a5fc;
  color: #333;
  transform: skew(-20deg);
}

.city div {
  transform: skew(20deg);
}
</style>

<div class="city">
  <div>上海</div>
</div>
```

![](https://3490195898-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LnQxDcxCKODvYvTUWe3%2F-Lwkei755x811_m1bgD1%2F-LwkfXkgKPb9jHCAjqHZ%2Fimage.png?alt=media\&token=058aa7ae-2a6a-4cf7-92c1-ae2c787d6a20)