Community Learn Tools Library Leisure

English

Home > Web Front-end > HTML Tutorial > HTML border CSS output triangle_html/css_WEB-ITnose

HTML border CSS output triangle_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:54:41

Original

1248 people have browsed it

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>

Copy after login

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   ;}

Copy after login

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!

Related labels：

HTML border CSS输出三角形

source：php.cn

Previous article：CSS DIV JQuery practical video summary_html/css_WEB-ITnose Next article：maven about building version numbers, compressing css, js and appending version numbers to these files when building

Statement of this Website

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