Home > Article > Web Front-end > Can css3 linear gradient achieve triangles?

Can css3 linear gradient achieve triangles?

青灯夜游Original: 2022-04-25 14:47:402047browse

css3 linear gradient can realize triangles; just create a 45-degree linear gradient and set the gradient color to two fixed colors, one is the color of the triangle and the other is a transparent color. The syntax "linear- gradient(45deg, color value, color value 50%, transparent color 50%, transparent color 100%)".

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

In CSS3, there are many ways to implement triangles, one of which is to use linear gradients. Let’s give you a detailed introduction below.

Use linear gradientlinear-gradient The principle of implementing a triangle is also very simple. We implement a 45° gradient linear gradient:

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

Can css3 linear gradient achieve triangles?

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

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

Can css3 linear gradient achieve triangles?

##And then make one of the colors transparent:

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

Can css3 linear gradient achieve triangles?

By rotating

rotate or scale, we can also get triangles of various angles and sizes:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
html,
body {
width: 100%;
height: 100%;
display: flex;
}

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

.rotate {
background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 1px);
}

.top {
background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 1px);
transform: rotate(135deg);
}

.left {
background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 1px);
transform: rotate(45deg);
}

.bottom {
background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 1px);
transform: rotate(-45deg);
}

.right {
background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 1px);
transform: rotate(-135deg);
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>

Can css3 linear gradient achieve triangles?

(Learning video sharing:

css video tutorial, web front-end)

The above is the detailed content of Can css3 linear gradient achieve triangles?. For more information, please follow other related articles on the PHP Chinese website!

html5 css css3

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to make the head and tail fixed in html5Next article：How to make the head and tail fixed in html5

See more

Can css3 linear gradient achieve triangles?

Related articles