# CSS画三角形

## 利用border

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

![](/files/-LwkaoNQhgWtzFuLHbgD)

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

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

![](/files/-LwkbhB1pNa1S4d5dKLs)

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

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

![](/files/-LwkcUUCf9009f_R0S26)

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

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

![](/files/-LwkdhRcdhDMXkB0fGmO)

## 利用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>
```

![](/files/-LwkfXkgKPb9jHCAjqHZ)


---

# 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://mm.ricky.moe/interview/inverview-record/tou-tiao-mian-jing/bi-shi/css-hua-san-jiao-xing.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.