How to implement triangles in css-CSS Tutorial-php.cn

How to implement triangles in css

青灯夜游

Release： 2021-10-11 17:23:26

Original

25726 people have browsed it

Implementation method: 1. Use a container with zero height and width and a transparent border; 2. Use linear gradient linear-gradient; 3. Use "transform:rotate" with "overflow:hidden"; 4. Use Characters such as "▼" and "▲" are drawn.

How to implement triangles in css

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

Use border to draw triangles

Using border to realize triangles should be mastered by most people, and it is also often seen in various face scriptures. Using Container with zero height and width and transparent border implementation.

The simple code is as follows:

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

Copy after login

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;
}

Copy after login

Container with zero height and width, set borders of different colors:

How to implement triangles in css

In this way, any If the color of the borders on the three sides is transparent, it is very easy to get triangles at various angles:

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

Copy after login

.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;
}

Copy after login

How to implement triangles in css

##Use linear-gradient to draw triangles

Next, we use linear gradient

linear-gradient to implement the triangle.

Its principle is also very simple. We implement a gradient of

45°:

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

Copy after login

How to implement triangles in css

Let its color change from gradient color to Change to two fixed colors:

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

Copy after login

How to implement triangles in css

Then make one of the colors transparent:

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

Copy after login

How to implement triangles in css

transform: rotate with overflow: hidden to draw triangles

This method is relatively conventional, use

transform: rotate with overflow: hidden. You can understand it at a glance and learn it as soon as you learn it. The simple animation diagram is as follows:

How to implement triangles in css

Set the rotation center of the graphic to the lower left corner

left bottom to rotate , with overflow: hidden.

Complete code:

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

Copy after login

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);
    }
}

Copy after login

Use characters to draw triangles

OK, the last one, somewhat unique, is to use characters to represent triangles.

The following lists the decimal Unicode representation codes of some triangle-shaped characters.

◄ : &#9668; 
► : &#9658; 
▼ : &#9660; 
▲ : &#9650;
⊿ : &#8895;
△ : &#9651;

Copy after login

For example, we use

▼ to implement a triangle ▼, the code is as follows:

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

Copy after login

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

Copy after login

The effect is still good:

1How to implement triangles in css

(Learning video sharing:

css video tutorial)

The above is the detailed content of How to implement triangles in css. For more information, please follow other related articles on the PHP Chinese website!