css实现小三角（原理） - 林七七-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

css实现小三角（原理） - 林七七

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 21, 2016 am 08:54 AM

效果图如图1所示：（简单示范，有点丑，莫介意）

PS:兼容IE，FF , chrome ,360安全浏览器

先讲下原理吧，如图2所示：

这个div的样式如下所示：

<span style="font-size: 15px;"><span style="color: #800000;">div</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 0px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 0px</span>;<span style="color: #ff0000;">
    border-width</span>:<span style="color: #0000ff;"> 20px</span>;<span style="color: #ff0000;">
    border-style</span>:<span style="color: #0000ff;"> solid</span>;<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> lightgreen pink yellow lightblue</span>;
}</span>

解释：当div的宽高为0时，设border的宽度并设颜色，会发现div像是被分割为4个小三角形，

因此当我们要其中一个小三角时，只需要将其它三个隐藏即可（方法：把那三条边颜色设为transparent即可）。

上三角：（图3）

对应的CSS代码：

<span style="font-size: 15px;"><span style="color: #800000;">#triangle</span>{<span style="color: #ff0000;">
    width</span>:<span style="color: #0000ff;"> 0px</span>;<span style="color: #ff0000;">
    height</span>:<span style="color: #0000ff;"> 0px</span>;<span style="color: #ff0000;">
    border-width</span>:<span style="color: #0000ff;"> 20px</span>;<span style="color: #ff0000;">
    border-style</span>:<span style="color: #0000ff;"> solid</span>;<span style="color: #ff0000;">
    border-color</span>:<span style="color: #0000ff;"> transparent transparent yellow transparent</span>;
}</span>

为了让它尽可能适应各种浏览器，我们多添加几行代码（主要是解决IE的兼容问题）：

<span style="font-size: 15px;"><span style="color: #008080;"> 1</span> <span style="color: #800000;">#triangle</span>{
<span style="color: #008080;"> 2</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;"> 0px</span>;
<span style="color: #008080;"> 3</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;"> 0px</span>;
<strong><span style="color: #008080;"> 4</span> <span style="color: #ff0000;">    *width</span>:<span style="color: #0000ff;"> 40px</span>;   
<span style="color: #008080;"> 5</span> <span style="color: #ff0000;">    *height</span>:<span style="color: #0000ff;"> 40px</span>;
<span style="color: #008080;"> 6</span> <span style="color: #ff0000;">    font-size</span>:<span style="color: #0000ff;"> 0</span>;
<span style="color: #008080;"> 7</span> <span style="color: #ff0000;">    line-height</span>:<span style="color: #0000ff;"> 0</span>;
<span style="color: #008080;"> 8</span> <span style="color: #ff0000;">    overflow</span>:<span style="color: #0000ff;"> hidden</span>;</strong>
<span style="color: #008080;"> 9</span> <span style="color: #ff0000;">    border-width</span>:<span style="color: #0000ff;"> 20px</span>;
<strong><span style="color: #008080;">10</span> <span style="color: #ff0000;">    border-style</span>:<span style="color: #0000ff;"> dashed dashed solid dashed</span>;
<span style="color: #008080;">11</span> <span style="color: #ff0000;">    border-color</span>:<span style="color: #0000ff;"> transparent transparent yellow transparent</span>;</strong>
<span style="color: #008080;">12</span> }</span>

解释：

①border-color: transparent transparent yellow transparent;

因为我们要的是上三角，根据图2，我们要保留的是下边框，故把其他三条边设为transparent；

②border-style: dashed dashed solid dashed;

把其他三边设为dashed，是因为IE6不支持透明属性transparent，故我们把其它三边的样式设为

dashed，dashed在边框宽度很大时，会隐藏。（因为我的电脑没有ie6，所以没有实践过，这一点有点抱歉）

③font-size: 0; line-height: 0; overflow: hidden;

如果不加这三句，会出现以下效果：

即在IE下，出现的不是三角形，而是梯形。

④最后多加了两句css hack: *width: 40px; *height: 40px;

当时用IE测试效果时，我发现根本找不到小三角，在网上搜各种博客也搜不到相关问题，后来随手加了句

width&height的样式，小三角就出现了，感觉应该是在IE下，div的宽高是包括border的（对于这点还是不太懂，希望有大牛给予解答）。

为了解决IE下的这个问题，我最后就加了这两句css hack。如果觉得不保险，还可以再加上" _width: 40px; _height: 40px;"

PS: ① IE6和IE7能识别"*"，IE6能识别"_"，具体搜索“CSS hack”。

② *width应设为 border-width 的两倍，*height同理。

对于下三角，左三角，右三角，只需改变上三角中的两句CSS即可，其他无需改变，改变的代码分别如下所示。

下三角：

<span style="color: #800000; font-size: 15px;">border-style: solid dashed dashed dashed;
border-color: lightgreen transparent transparent transparent;</span>

左三角：

<span style="color: #800000; font-size: 15px;">border-style: dashed solid dashed dashed;
border-color: transparent pink transparent transparent;</span>

右三角：

<span style="color: #800000; font-size: 15px;">border-style: dashed dashed dashed solid;
border-color: transparent transparent transparent lightblue;</span>

最后，给出效果图1的代码：

<span style="font-size: 15px;"><span style="color: #008080;"> 1</span> <span style="color: #008000;">/*</span><span style="color: #008000;"> css </span><span style="color: #008000;">*/</span>
<span style="color: #008080;"> 2</span> <span style="color: #800000;">*</span>{
<span style="color: #008080;"> 3</span> <span style="color: #ff0000;">    margin</span>:<span style="color: #0000ff;"> 0px</span>;
<span style="color: #008080;"> 4</span> <span style="color: #ff0000;">    padding</span>:<span style="color: #0000ff;"> 0px</span>;
<span style="color: #008080;"> 5</span> <span style="color: #ff0000;">    text-align</span>:<span style="color: #0000ff;"> center</span>;
<span style="color: #008080;"> 6</span> }
<span style="color: #008080;"> 7</span> <span style="color: #800000;">#container</span>{
<span style="color: #008080;"> 8</span> <span style="color: #ff0000;">    position</span>:<span style="color: #0000ff;"> relative</span>;<span style="color: #ff0000;">  //这句很重要，因为小三角是相对父元素#container来绝对定位的
</span><span style="color: #008080;"> 9</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;"> 50px</span>;
<span style="color: #008080;">10</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;"> 40px</span>;
<span style="color: #008080;">11</span> <span style="color: #ff0000;">    border</span>:<span style="color: #0000ff;">1px solid lightblue</span>;
<span style="color: #008080;">12</span> <span style="color: #ff0000;">    margin</span>:<span style="color: #0000ff;"> 200px auto</span>;
<span style="color: #008080;">13</span> <span style="color: #ff0000;">    padding</span>:<span style="color: #0000ff;"> 20px</span>;
<span style="color: #008080;">14</span>  
<span style="color: #008080;">15</span> }
<span style="color: #008080;">16</span> <span style="color: #800000;">#chat</span>{
<span style="color: #008080;">17</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;"> 50px</span>;
<span style="color: #008080;">18</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;"> 40px</span>;
<span style="color: #008080;">19</span> <span style="color: #ff0000;">    background-color</span>:<span style="color: #0000ff;"> lightblue</span>;
<span style="color: #008080;">20</span> }
<span style="color: #008080;">21</span> <span style="color: #800000;">#triangle</span>{
<span style="color: #008080;">22</span> <span style="color: #ff0000;">    position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">   //设置小三角绝对定位
</span><span style="color: #008080;">23</span> <span style="color: #ff0000;">    width</span>:<span style="color: #0000ff;"> 0px</span>;
<span style="color: #008080;">24</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;"> 0px</span>;
<span style="color: #008080;">25</span> <span style="color: #ff0000;">    *width</span>:<span style="color: #0000ff;"> 14px</span>;
<span style="color: #008080;">26</span> <span style="color: #ff0000;">    *height</span>:<span style="color: #0000ff;"> 14px</span>;
<span style="color: #008080;">27</span> <span style="color: #ff0000;">    font-size</span>:<span style="color: #0000ff;"> 0</span>;
<span style="color: #008080;">28</span> <span style="color: #ff0000;">    line-height</span>:<span style="color: #0000ff;"> 0</span>;
<span style="color: #008080;">29</span> <span style="color: #ff0000;">    overflow</span>:<span style="color: #0000ff;"> hidden</span>;
<span style="color: #008080;">30</span> <span style="color: #ff0000;">    border-width</span>:<span style="color: #0000ff;"> 7px</span>;
<span style="color: #008080;">31</span> <span style="color: #ff0000;">    border-style</span>:<span style="color: #0000ff;"> dashed dashed dashed solid</span>;
<span style="color: #008080;">32</span> <span style="color: #ff0000;">    border-color</span>:<span style="color: #0000ff;"> transparent transparent transparent lightblue</span>;
<span style="color: #008080;">33</span> <span style="color: #ff0000;">    top</span>:<span style="color: #0000ff;"> 33px</span>;<span style="color: #ff0000;">   //33px：父元素#container的内边距20px + #chat宽度的一半20px - 自身元素#triangle的边宽7px =33px
</span><span style="color: #008080;">34</span> <span style="color: #ff0000;">    left</span>:<span style="color: #0000ff;"> 70px</span>;<span style="color: #ff0000;">  //70px</span>:<span style="color: #0000ff;">  #chat的宽度50px + 父元素#container的内边距20px =70px
</span><span style="color: #008080;">35</span> }</span>

<span style="font-size: 15px;"><span style="color: #008000;">/*</span><span style="color: #008000;"> html代码 </span><span style="color: #008000;">*/</span><span style="color: #800000;">
<div id="container">
    <div id="chat"></div>
    <div id="triangle"></div>
</div></span></span>

如有不足之处，欢迎批评建议， O(∩_∩)O谢谢

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

HTML vs. CSS vs. JavaScript: A Comparative OverviewApr 16, 2025 am 12:04 AM

The roles of HTML, CSS and JavaScript in web development are: HTML is responsible for content structure, CSS is responsible for style, and JavaScript is responsible for dynamic behavior. 1. HTML defines the web page structure and content through tags to ensure semantics. 2. CSS controls the web page style through selectors and attributes to make it beautiful and easy to read. 3. JavaScript controls web page behavior through scripts to achieve dynamic and interactive functions.

HTML: Is It a Programming Language or Something Else?Apr 15, 2025 am 12:13 AM

HTMLisnotaprogramminglanguage;itisamarkuplanguage.1)HTMLstructuresandformatswebcontentusingtags.2)ItworkswithCSSforstylingandJavaScriptforinteractivity,enhancingwebdevelopment.

HTML: Building the Structure of Web PagesApr 14, 2025 am 12:14 AM

HTML is the cornerstone of building web page structure. 1. HTML defines the content structure and semantics, and uses, etc. tags. 2. Provide semantic markers, such as, etc., to improve SEO effect. 3. To realize user interaction through tags, pay attention to form verification. 4. Use advanced elements such as, combined with JavaScript to achieve dynamic effects. 5. Common errors include unclosed labels and unquoted attribute values, and verification tools are required. 6. Optimization strategies include reducing HTTP requests, compressing HTML, using semantic tags, etc.

From Text to Websites: The Power of HTMLApr 13, 2025 am 12:07 AM

HTML is a language used to build web pages, defining web page structure and content through tags and attributes. 1) HTML organizes document structure through tags, such as,. 2) The browser parses HTML to build the DOM and renders the web page. 3) New features of HTML5, such as, enhance multimedia functions. 4) Common errors include unclosed labels and unquoted attribute values. 5) Optimization suggestions include using semantic tags and reducing file size.

Understanding HTML, CSS, and JavaScript: A Beginner's GuideApr 12, 2025 am 12:02 AM

WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

The Role of HTML: Structuring Web ContentApr 11, 2025 am 12:12 AM

The role of HTML is to define the structure and content of a web page through tags and attributes. 1. HTML organizes content through tags such as , making it easy to read and understand. 2. Use semantic tags such as, etc. to enhance accessibility and SEO. 3. Optimizing HTML code can improve web page loading speed and user experience.

HTML and Code: A Closer Look at the TerminologyApr 10, 2025 am 09:28 AM

HTMLisaspecifictypeofcodefocusedonstructuringwebcontent,while"code"broadlyincludeslanguageslikeJavaScriptandPythonforfunctionality.1)HTMLdefineswebpagestructureusingtags.2)"Code"encompassesawiderrangeoflanguagesforlogicandinteract

HTML, CSS, and JavaScript: Essential Tools for Web DevelopersApr 09, 2025 am 12:12 AM

HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.

See all articles

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Best Graphic Settings

4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle Solution

2 weeks agoByDDD

R.E.P.O. How to Fix Audio if You Can't Hear Anyone

1 months agoBy尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Chat Commands and How to Use Them

1 months agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Atom editor mac version download

The most popular open source editor

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.