Create a cool triangle background image using CSS3-CSS Tutorial-php.cn

Create a cool triangle background image using CSS3

青灯夜游

Release： 2021-08-23 12:05:44

Original

2465 people have browsed it

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>

Copy after login

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>

Copy after login

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

Copy after login

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!