search

Home  >  Article  >  Web Front-end  >  Using the new features of CSS3 to create a transparent border triangle_Experience exchange

Using the new features of CSS3 to create a transparent border triangle_Experience exchange

WBOY
WBOYOriginal
2016-05-16 12:03:352182browse

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>
 <div class="arrow-up"></div>
 <div class="arrow-down"></div>
 <div class="arrow-left"></div>
 <div class="arrow-right"></div>
</body>
</html>

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：Detailed analysis of the difference between css float attribute and position:absolute_Basic TutorialNext article：Detailed analysis of the difference between css float attribute and position:absolute_Basic Tutorial

Related articles

See more