Home >Web Front-end >CSS Tutorial >An example of how to create transparent triangles using the new content of CSS3
An example of how to create transparent triangles using the new content of CSS3
- 巴扎黑Original
- 2017-08-11 13:59:141717browse
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='text/css'>
/* 上三角 */
.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>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!
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：Summary of CSS clear float methodNext article：Summary of CSS clear float method