CSS triangle_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 12:34:52
Original
1293 people have browsed it

Upper triangle ▲

1 width: 0;2 height: 0;3 line-height: 0;4 font-size: 0;5 border-width: 10px;6 border-style: solid;7 border-color: transparent transparent #000 transparent;
Copy after login

Lower triangle?

1 width: 0;2 height: 0;3 line-height: 0;4 font-size: 0;5 border-width: 10px;6 border-style: solid;7 border-color: #000 transparent transparent transparent;
Copy after login


Left triangle

1 width: 0;2 height: 0;3 line-height: 0;4 font-size: 0;5 border-width: 10px;6 border-style: dashed solid dashed dashed;7 border-color: transparent #000 transparent transparent;
Copy after login


Right triangle

1 width: 0;2 height: 0;3 line-height: 0;4 font-size: 0;5 border-width: 10px;6 border-style: dashed dashed dashed solid;7 border-color: transparent transparent transparent #000 ;
Copy after login


If you need to position the triangle, add it yourself position

The size of the triangle changes border-width, and the color changes the color value in border-color.

It has been tested in IE6/7/8 and Firefox and has no compatibility issues. It should be noted that the transparent attribute in border-color is not supported in IE6, that is, it will be displayed around the triangle. To white, there are two solutions:

1. If the background of the triangle is a single color, change the transparent in border-color to the corresponding color value

2. If the background of the triangle It is not monochrome. You need to change the CSS in IE6 to support transparency. There are many methods on the Internet. I personally support using JS??DD_belatedPNG, which will be introduced in a blog post later.

Related labels:
source:php.cn
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template