搜索
首页web前端html教程css实现小三角（原理） - 林七七

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
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谢谢
 
声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
相关文章
HTML与CSS vs. JavaScript：比较概述HTML与CSS vs. JavaScript：比较概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是：HTML负责内容结构，CSS负责样式，JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容，确保语义化。2.CSS通过选择器和属性控制网页样式，使其美观易读。3.JavaScript通过脚本控制网页行为，实现动态和交互功能。

HTML：是编程语言还是其他？HTML：是编程语言还是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增强WebevebDevelopment。

HTML：建立网页的结构HTML：建立网页的结构Apr 14, 2025 am 12:14 AM

HTML是构建网页结构的基石。1.HTML定义内容结构和语义，使用、、等标签。2.提供语义化标记，如、、等，提升SEO效果。3.通过标签实现用户交互，需注意表单验证。4.使用、等高级元素结合JavaScript实现动态效果。5.常见错误包括标签未闭合和属性值未加引号，需使用验证工具。6.优化策略包括减少HTTP请求、压缩HTML、使用语义化标签等。

从文本到网站：HTML的力量从文本到网站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一种用于构建网页的语言，通过标签和属性定义网页结构和内容。1）HTML通过标签组织文档结构，如、。2）浏览器解析HTML构建DOM并渲染网页。3）HTML5的新特性如、、增强了多媒体功能。4）常见错误包括标签未闭合和属性值未加引号。5）优化建议包括使用语义化标签和减少文件大小。

了解HTML，CSS和JavaScript：初学者指南了解HTML，CSS和JavaScript：初学者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：构建Web内容HTML的角色：构建Web内容Apr 11, 2025 am 12:12 AM

HTML的作用是通过标签和属性定义网页的结构和内容。1.HTML通过到、等标签组织内容，使其易于阅读和理解。2.使用语义化标签如、等增强可访问性和SEO。3.优化HTML代码可以提高网页加载速度和用户体验。

HTML和代码：仔细观察术语HTML和代码：仔细观察术语Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代码” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代码”代码“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

HTML，CSS和JavaScript：Web开发人员的基本工具HTML，CSS和JavaScript：Web开发人员的基本工具Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web开发的三大支柱。1.HTML定义网页结构，使用标签如、等。2.CSS控制网页样式，使用选择器和属性如color、font-size等。3.JavaScript实现动态效果和交互，通过事件监听和DOM操作。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

显示更多

热门文章

R.E.P.O.能量晶体解释及其做什么（黄色晶体）
4 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
4 周前By尊渡假赌尊渡假赌尊渡假赌
刺客信条阴影：贝壳谜语解决方案
2 周前ByDDD
R.E.P.O.如果您听不到任何人，如何修复音频
4 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它们
4 周前By尊渡假赌尊渡假赌尊渡假赌
显示更多

热工具

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

EditPlus 中文破解版

EditPlus 中文破解版

体积小，语法高亮，不支持代码提示功能

MinGW - 适用于 Windows 的极简 GNU

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中，你可以继续在那里关注我们。MinGW：GNU编译器集合（GCC）的本地Windows移植版本，可自由分发的导入库和用于构建本地Windows应用程序的头文件；包括对MSVC运行时的扩展，以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

显示更多

热门话题

gmail邮箱登陆入口在哪里
7523
15
CakePHP 教程
1378
52
steam的账户名称是什么格式
81
11
win11激活密钥永久
54
19
NYT连接提示和答案
21
74
显示更多