An example of how to create transparent triangles using the new content of CSS3-CSS Tutorial-php.cn

An example of how to create transparent triangles using the new content of CSS3

巴扎黑

Release： 2017-08-11 13:59:14

Original

1709 people have browsed it

This article shares an example of using CSS3 to make a triangle. Interested friends can refer to it.

Let’s take a look at the effect first. Before CSS3, this was completely unimaginable. Only pictures could do it. But today, when HTML5 and CSS3 are so popular, it is not a problem to achieve this effect.

Look at the implemented code:

<!DOCTYPE html>
<html>
<head>
<style type=&#39;text/css&#39;>

/* 上三角 */
.arrow-up {
 width: 0;
 height: 0;
 border-left: 20px solid transparent;
 border-right: 20px solid transparent;
 border-bottom: 20px solid green;
}

/* 下三角 */
.arrow-down {
 width: 0;
 height: 0;
 border-left: 20px solid transparent;
 border-right: 20px solid transparent;
 border-top: 20px solid orange;
}

/* 右三角 */
.arrow-right {
 width: 0;
 height: 0;
 border-top: 60px solid transparent;
 border-bottom: 60px solid transparent;
 border-left: 60px solid blue;
}

/* 左三角 */
.arrow-left {
 width: 0;
 height: 0;
 border-top: 10px solid transparent;
 border-bottom: 10px solid transparent;
 border-right: 10px solid silver;
}
</style>
</head>
<body>
 <p class="arrow-up"></p>
 <p class="arrow-down"></p>
 <p class="arrow-left"></p>
 <p class="arrow-right"></p>
</body>
</html>

Copy after login

The above is the detailed content of An example of how to create transparent triangles using the new content of CSS3. For more information, please follow other related articles on the PHP Chinese website!