CSS에서 삼각형을 구현하는 방법

구현 방법: 1. 높이와 너비가 0이고 테두리가 투명한 컨테이너를 사용합니다. 2. 선형 그라데이션을 사용합니다. 3. "overflow:hidden"과 함께 "transform:rotate"를 사용합니다. , "▲" 등의 문자가 그려집니다.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

테두리를 사용하여 삼각형 그리기

테두리를 사용하여 삼각형을 구현하는 것은 대부분의 사람들에게 익숙할 것이며 높이와 너비가 0인 컨테이너와 투명한 테두리 구현을 사용하는 경우도 자주 볼 수 있습니다.

간단한 코드는 다음과 같습니다.

<div class=&#39;normal&#39;></div>

html, body {
  width: 100%;
  height: 100%;
  display: flex;
}

div {
  width: 0px;
  height: 0px;
  margin: auto;
}

.normal {
  border-top: 50px solid yellowgreen;
  border-bottom: 50px solid deeppink;
  border-left: 50px solid bisque;
  border-right: 50px solid chocolate;
}

높이와 너비가 0인 컨테이너, 다양한 색상의 테두리 설정:

이런 식으로 세 변의 테두리 색상이 투명, 매우 유용합니다. 다양한 각도의 삼각형을 쉽게 얻을 수 있습니다: <code>transparent，则非常容易得到各种角度的三角形：

<div class=&#39;top&#39;></div>
<div class=&#39;bottom&#39;></div>
<div class=&#39;left&#39;></div>
<div class=&#39;right&#39;></div>

.top {
  border: 50px solid transparent;
  border-bottom: 50px solid deeppink;
}

.left {
  border: 50px solid transparent;
  border-right: 50px solid deeppink;
}

.bottom {
  border: 50px solid transparent;
  border-top: 50px solid deeppink;
}

.right {
  border: 50px solid transparent;
  border-bottom: 50px solid deeppink;
}

使用 linear-gradient 绘制三角形

接着，我们使用线性渐变 linear-gradient 实现三角形。

它的原理也非常简单，我们实现一个 45° 的渐变：

div {
  width: 100px;
  height: 100px;
  background: linear-gradient(45deg, deeppink, yellowgreen);
}

让它的颜色从渐变色变为两种固定的颜色：

div {
  width: 100px;
  height: 100px;
  background: linear-gradient(45deg, deeppink, deeppink 50%, yellowgreen 50%, yellowgreen 100%);
}

再让其中一个颜色透明即可：

div {
  background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 100%);
}

transform: rotate 配合 overflow: hidden 绘制三角形

这种方法还是比较常规的，使用 transform: rotate 配合 overflow: hidden。一看就懂，一学就会，简单的动画示意图如下：

设置图形的旋转中心在左下角 left bottom，进行旋转，配合 overflow: hidden。

完整的代码：

<div class="demo"></div>
<div class="demo-opacity"></div>
<div class="triangle"></div>

html, body {
    width: 100%;
    height: 100%;
    display: flex;
}

div {
    width: 141px;
    height: 100px;
    margin: auto;
}

.demo-opacity {
    overflow: hidden;
}

.demo,
.demo-opacity {
    position: relative;
    border: 1px solid #000;
    background: unset;
    
    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        animation: conicmove 3s infinite linear;
        background: deeppink;
        transform-origin: left bottom;
        z-index: -1;
    }
}

.triangle {
    position: relative;
    background: unset;
    overflow: hidden;
    
    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: deeppink;
        transform-origin: left bottom;
        transform: rotate(45deg);
        z-index: -1;
    }
}

@keyframes conicmove {
    100% {
        transform: rotate(45deg);
    }
}

利用字符绘制三角形

OK，最后一种，有些独特，就是使用字符表示三角形。

下面列出一些三角形形状的字符的十进制 Unicode 表示码。

◄ : ◄ 
► : ► 
▼ : ▼ 
▲ : ▲
⊿ : ⊿
△ : △

譬如，我们使用 ▼

<div class="normal">&#9660; </div>

div {
    font-size: 100px;
    color: deeppink;
}

선형 그라데이션을 사용하여 삼각형을 그립니다

다음으로 선형 그라데이션 linear-gradient을 사용하여 삼각형을 구현합니다. 원칙도 매우 간단합니다. 45° 그라데이션을 구현합니다:

rrreee🎜🎜🎜색상을 그라데이션 색상에서 두 가지 고정 색상으로 변경하세요: 🎜rrreee🎜🎜🎜색상 중 하나를 투명하게 만드세요:🎜rrreee 🎜🎜🎜🎜transform: 오버플로로 회전 : 삼각형을 그리려면 숨김 🎜🎜🎜 이 방법은 비교적 일반적입니다. overflow: hide와 함께 transform:rotate를 사용하세요. 한눈에 이해하고 배우자마자 바로 익힐 수 있는 간단한 애니메이션 도표는 다음과 같습니다. 🎜🎜🎜🎜그래픽의 회전 중심을 왼쪽 하단 왼쪽 하단으로 설정하고 회전시킨 다음 overflow:hidden에 협력하세요. 🎜🎜완전한 코드: 🎜rrreeerrreee🎜🎜문자를 사용하여 삼각형 그리기🎜🎜🎜자, 마지막으로 다소 독특한 것은 문자를 사용하여 삼각형을 나타내는 것입니다. 🎜🎜일부 삼각형 모양 문자의 십진수 유니코드 표현 코드는 다음과 같습니다. 🎜rrreee🎜예를 들어 ▼ 를 사용하여 삼각형을 구현하면 ▼ 코드는 다음과 같습니다. 🎜rrreeerrreee🎜효과는 여전히 좋습니다: 🎜🎜🎜🎜🎜(동영상 공유 학습: 🎜css 동영상 튜토리얼🎜) 🎜

위 내용은 CSS에서 삼각형을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!