CSS3 繪制三角形

CSS3 提供了一種新的方式來繪制三角形，這種新的繪制方式使用 CSS 的 `border-radius` 屬性和 `gradient` 容器來實現。

在 CSS3 中，可以使用 `border-radius` 屬性來設置元素周圍的邊框半徑，這個半徑內的元素將會成為一個三角形。使用 `gradient` 容器可以定義一個漸變背景，然后通過 `gradient` 容器內的元素來繪制三角形。

下面是一個使用 CSS3 繪制三角形的示例：

```html

<style>

.triangle {

position: relative;

width: 100px;

height: 100px;

border-radius: 50% 50% 0 0;

background: linear-gradient(to right, #ff99cc, #ff0066);

.triangle:before,

.triangle:after {

content: "";

position: absolute;

top: 50%;

left: 50%;

width: 0;

height: 0;

border-radius: 50% 0 0 50%;

transform: translate(-50%, -50%);

.triangle:before {

background: #ff99cc;

left: 0;

transform: rotate(-45deg);

.triangle:after {

background: #ff0066;

left: 50%;

transform: rotate(45deg);

</style>

<div class="triangle"></div>

在上面的示例中，我們使用 `border-radius` 屬性來設置元素的邊框半徑，然后使用 `gradient` 容器定義一個漸變背景。`:before` 和 `:after` 偽元素分別用來繪制水平和垂直方向的三角形，它們的 `content` 屬性設置為一個空字符串，然后使用 `border-radius` 和 `transform` 屬性來設置邊框半徑和旋轉角度。

使用 CSS3 繪制三角形的好處在于它可以靈活控制三角形的大小、形狀和顏色，同時也可以實現其他一些 CSS 樣式，比如陰影、邊框寬度等。