Home >Web Front-end >HTML Tutorial >HTML border CSS output triangle_html/css_WEB-ITnose
HTML border CSS output triangle_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:54:411264browse
There is the following html code:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .triangle_up{ height:0px; width:0px; border-bottom:50px solid red; border-left:50px solid transparent ; border-right:50px solid transparent ;} </style></head><body> <div class="triangle_up"></div> </body></html> It is confusing at first glance, but the effect is like this:
Change the CSS:
.triangle_up{ height:0px; width:0px; border-bottom:50px solid red; border-left:50px solid ; border-right:50px solid ;}
Still confused, change the width and height again:
Change the width and height again:
It suddenly dawned on me.
The width and height of the block are both 0, and the transparency is cleverly set, so it looks like a triangle!
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：CSS DIV JQuery practical video summary_html/css_WEB-ITnoseNext article：CSS DIV JQuery practical video summary_html/css_WEB-ITnose