search

Home >Web Front-end >JS Tutorial >Triangular arrow pattern drawn with pure CSS

Triangular arrow pattern drawn with pure CSS

巴扎黑
巴扎黑Original
2016-11-25 14:19:021804browse

div#up { 
width: 0px; 
height: 0px; 
border-left: 5px solid transparent; 
border-right: 5px solid transparent; 
border-bottom: 5px solid#2f2f2f; 
} 
div#down { 
width: 0px; 
height: 0px; 
border-left: 20px solid transparent; 
border-right: 20px solidtransparent; 
border-top: 20px solid #f00; 
} 
div#left { 
width: 0px; 
height: 0px; 
border-top: 10px solid transparent; 
border-bottom: 10px solid transparent; 
border-right: 10px solidyellow; 
} 
div#right { 
width: 0px; 
height: 0px; 
border-top: 60px solid transparent; 
border-bottom: 60px solid transparent; 
border-left: 60px solid green; 
} 


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：Keeping decimals and taking integers in JavaScriptNext article：Keeping decimals and taking integers in JavaScript

Related articles

See more