Home > Article > Web Front-end > Create a cool triangle background image using CSS3

Create a cool triangle background image using CSS3

青灯夜游Original: 2021-08-20 17:10:332467browse

How to make your webpage more eye-catching and more high-end? A good-looking background is indispensable! The following article will share a little trick of using CSS3 to create a cool triangle background image, so that your webpage can be both beautiful and practical~

As the title says, today we will mainly show you how to use it. CSS3 way to create a cool triangular background, which is very useful when we want to show some completely different options, such as day and night or winter and summer.

Let’s start with the code directly:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
  margin: 0;
  padding: 0;
}

div {
  position: absolute;
  height: 100vh;
  width: 100vw;
}

.day {
  background-image: url("https://img.php.cn/upload/article/000/000/024/611f69e8a300f34Create a cool triangle background image using CSS3");
  background-size: cover;
  background-repeat: no-repeat;
}

.night {
  background-image: url("https://img.php.cn/upload/article/000/000/024/611f6a067f909111.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  clip-path: polygon(100vw 0, 0% 0vh, 100vw 100vh);
}
</style>
</head>
<body>
  <div class="day"></div>
  <div class="night"></div>
</body>
</script>
</body>
</html>

The effect is as shown below:

Create a cool triangle background image using CSS3

How about ! Isn’t the effect great!

Let’s analyze the above code:

First create two divs

<body>
  <div class="day"></div>
  <div class="night"></div>
</body>

Then add background images to these two divs using the background-image attribute, and use the background-size attribute to set the image size and background-repeat attribute settings No repeated tiles.
- background-size specifies the background image size. When the value is set to "cover", the aspect ratio of the image will be maintained and the image will be scaled to The minimum size to completely cover the background positioning area.
Finally draw a triangle for the second div using the clip-path attribute.

 clip-path: polygon(100vw 0, 0% 0vh, 100vw 100vh);

clip-path is a new attribute of css3, which means clipping path, allowing us to easily generate various geometric figures. clip-path achieves the graphics we want by defining a special path. And this path is exactly the path in SVG.
polygon() function: used to define a polygon and can also be used to clip graphics. Its parameters are a set of coordinate pairs ( ), each coordinate pair represents the coordinates of a vertex of the polygon. The browser will connect the last vertex to the first vertex to form a closed polygon. Coordinate pairs are separated by commas and can use absolute or percentage unit values.

PHP Chinese website platform has a lot of video teaching resources. Welcome everyone to learn "css Video Tutorial"!

The above is the detailed content of Create a cool triangle background image using CSS3. For more information, please follow other related articles on the PHP Chinese website!

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：Teach you step by step how to use css to add flame effects to text (detailed code explanation)Next article：Teach you step by step how to use css to add flame effects to text (detailed code explanation)

See more

Create a cool triangle background image using CSS3

Related articles