如果是一个正方形，我们写边时，会用到border，但我们这里讨论的三角形本身就是border，不可能再给border添加border属性，所以我们需要用到其他办法。

最容易想到的，是叠加层。思路是将两个三角形叠加在一起，外层三角形稍大一些，颜色设置成边框所需的颜色；内层三角形绝对定位在里面。整体就能形成带边框三角形的假象。

这里就涉及到一个绝对定位的问题，上、下、左、右四种方向的三角形相对于父级定位是不同的。首先我们来看下，当定位都为0(left:0px; top:0px;)时，会发生什么。

HTML：

CSS:

/*向上*/

.triangle_border_up{

width:0;

height:0;

border-width:0 30px 30px;

border-style:solid;

border-color:transparent transparent #333;/*透明 透明 灰*/

margin:40px auto;

position:relative;

}

.triangle_border_up span{

display:block;

width:0;

height:0;

border-width:0 28px 28px;

border-style:solid;

border-color:transparent transparent #fc0;/*透明 透明 黄*/

position:absolute;

top:0px;

left:0px;

}

/*向下*/

.triangle_border_down{

width:0;

height:0;

border-width:30px 30px 0;

border-style:solid;

border-color:#333 transparent transparent;/*灰 透明 透明 */

margin:40px auto;

position:relative;

}

.triangle_border_down span{

display:block;

width:0;

height:0;

border-width:28px 28px 0;

border-style:solid;

border-color:#fc0 transparent transparent;/*黄 透明 透明 */

position:absolute;

top:0px;

left:0px;

}

/*向左*/

.triangle_border_left{

width:0;

height:0;

border-width:30px 30px 30px 0;

border-style:solid;

border-color:transparent #333 transparent transparent;/*透明 灰 透明 透明 */

margin:40px auto;

position:relative;

}

.triangle_border_left span{

display:block;

width:0;

height:0;

border-width:28px 28px 28px 0;

border-style:solid;

border-color:transparent #fc0 transparent transparent;/*透明 黄 透明 透明 */

position:absolute;

top:0px;

left:0px;

}

/*向右*/

.triangle_border_right{

width:0;

height:0;

border-width:30px 0 30px 30px;

border-style:solid;

border-color:transparent transparent transparent #333;/*透明 透明 透明 灰*/

margin:40px auto;

position:relative;

}

.triangle_border_right span{

display:block;

width:0;

height:0;

border-width:28px 0 28px 28px;

border-style:solid;

border-color:transparent transparent transparent #fc0;/*透明 透明 透明 黄*/

position:absolute;

top:0px;

left:0px;

}

效果如图：

为什么不是我们预想的如下图的样子呢

原因是，我们看到的三角形是边，而不是真的具有内容的区域，请回忆下CSS的盒子模型的内容。

绝对定位(position:absolute)，是根据相对定位父层内容的边界计算的。

再结合上篇我们最开始写的宽高为0的空div:

这个空的div，content的位置在中心，所以内部三角形是根据中心这个点来定位的。

为了看清楚一些，我们使用上一次的方法，给span增加一个阴影：

1

box-shadow:0 0 2px rgba(0,0,0,1);

效果如图：

这回我们明确的知道了，内部的三角形都是根据外部三角形实际内容的点来定位的，而非我们肉眼看到的三角形的边界定位。

HTML不变，CSS：

/*向上*/

.triangle_border_up{

width:0;

height:0;

border-width:0 30px 30px;

border-style:solid;

border-color:transparent transparent #333;/*透明 透明 灰*/

margin:40px auto;

position:relative;

}

.triangle_border_up span{

display:block;

width:0;

height:0;

border-width:0 28px 28px;

border-style:solid;

border-color:transparent transparent #fc0;/*透明 透明 黄*/

position:absolute;

top:1px;

left:-28px;

}

/*向下*/

.triangle_border_down{

width:0;

height:0;

border-width:30px 30px 0;

border-style:solid;

border-color:#333 transparent transparent;/*灰 透明 透明 */

margin:40px auto;

position:relative;

}

.triangle_border_down span{

display:block;

width:0;

height:0;

border-width:28px 28px 0;

border-style:solid;

border-color:#fc0 transparent transparent;/*黄 透明 透明 */

position:absolute;

top:-29px;

left:-28px;

}

/*向左*/

.triangle_border_left{

width:0;

height:0;

border-width:30px 30px 30px 0;

border-style:solid;

border-color:transparent #333 transparent transparent;/*透明 灰 透明 透明 */

margin:40px auto;

position:relative;

}

.triangle_border_left span{

display:block;

width:0;

height:0;

border-width:28px 28px 28px 0;

border-style:solid;

border-color:transparent #fc0 transparent transparent;/*透明 黄 透明 透明 */

position:absolute;

top:-28px;

left:1px;

}

/*向右*/

.triangle_border_right{

width:0;

height:0;

border-width:30px 0 30px 30px;

border-style:solid;

border-color:transparent transparent transparent #333;/*透明 透明 透明 灰*/

margin:40px auto;

position:relative;

}

.triangle_border_right span{

display:block;

width:0;

height:0;

border-width:28px 0 28px 28px;

border-style:solid;

border-color:transparent transparent transparent #fc0;/*透明 透明 透明 黄*/

position:absolute;

top:-28px;

left:-29px;

效果如图：

进一步来写气泡框的三角形，如图所示：

HTML：

三角形

纯CSS写带边框的三角形

CSS：

.test_triangle_border{

width:200px;

margin:0 auto 20px;

position:relative;

}

.test_triangle_border a{

color:#333;

font-weight:bold;

text-decoration:none;

}

.test_triangle_border .popup{

width:100px;

background:#fc0;

padding:10px 20px;

color:#333;

border-radius:4px;

position:absolute;

top:30px;

left:30px;

border:1px solid #333;

}

.test_triangle_border .popup span{

display:block;

width:0;

height:0;

border-width:0 10px 10px;

border-style:solid;

border-color:transparent transparent #333;

position:absolute;

top:-10px;

left:50%;/* 三角形居中显示 */

margin-left:-10px;/* 三角形居中显示 */

}

.test_triangle_border .popup em{

display:block;

width:0;

height:0;

border-width:0 10px 10px;

border-style:solid;

border-color:transparent transparent #fc0;

position:absolute;

top:1px;

left:-10px;

}

(2)东北、东南、西北、西南三角形的写法

继续，来写西北方(↖)，东北方(↗)，西南方(↙)，东南方(↘)的三角形。

原理如图：

根据颜色的划分，每个可以有两种CSS来写，分别利用不同的边来创造所需三角形。

写一个nw(↖)的例子：

HTML：

1

CSS(1)：

.triangle_border_nw{

width:0;

height:0;

border-width:30px 30px 0 0;

border-style:solid;

border-color:#6c6 transparent transparent transparent;

margin:40px auto;

position:relative;

}

CSS(2)：

.triangle_border_nw{

width:0;

height:0;

border-width:0 0 30px 30px;

border-style:solid;

border-color:transparent transparent transparent #6c6;

margin:40px auto;

position:relative;

}

两种CSS效果均如图所示：

以上是利用CSS写三角形，晋级到

(1)有边框的三角形

(2)东北、东南、西北、西南三角形的写法

html边框如何制作三角形,如何用css3绘制有边框的三角形相关推荐

  1. html盒子左右边框边距,盒子模型之CSS3学习之边框(Border)

    本篇文章给大家带来的内容是关于盒子模型之CSS3学习之边框(Border) ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 盒子模型之border 边框相关属性 border-wid ...

  2. 用html怎么制作风车,如何用css3实现风车效果

    前面讲过css3可以替代很多js实现的效果,其实很多时候纯css3甚至可以替代图片,直接用css3就可以画出一些简单的图片.虽然css3画出来的图片效果可能不如直接用图片的好,实现起来也比较复杂,最麻 ...

  3. 如何用手机HTML制作哆啦a梦,CSS3绘制哆啦A梦（带鼠标动画）

    body{ margin: 0; background: lightblue; } /*哆啦A梦*/ .doa{ position: relative; top: 100px; } .head{ ma ...

  4. 【CSS】css3绘制各种形状图形三角形，菱形，五角星，椭圆等

    1.制作圆形: 要使用CSS来制作一个圆形,我们需要一个div,被给它设置一个ID <div id="ang"></div>  圆形在设置CSS时要设置宽度 ...

  5. border三角形阴影(不规则图形阴影)和多重边框的制作

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 1. border的组合写法 border:border-width border-style borde ...

  6. html背景纹理,如何用css3制作纹理背景

    如何用css3制作纹理背景 看到题目大家也许会想,这是什么意思,一直想系统一下自己的css3的知识,才发现自己对css3的掌握程度简直不敢直视,很多地方都差了好多,暂且一点点来学吧! 记得有一天在微博 ...

  7. php设置加载动画,如何用CSS3制作页面圆圈加载动画（附代码）

    打开页面时,经常会遇到页面正在加载的情况,作为一个前端工程师,你知道如何用CSS3实现页面加载动画效果吗?这篇文章就和大家分享一个炫酷的圆圈加载动画效果的代码,有一定的参考价值,感兴趣的朋友可以看看. ...

  8. 【web前端特效源码】使用HTML5+CSS3制作一个会动的不规则斑点边框半径动画的动画效果~~适合初学者~超简单~ |前端开发

    b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会动的不规则斑点边框半径动画的动画效果~~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: <!DOCT ...

  9. CSS动画编辑软件,如何用css3在app制作出如丝般顺滑的动画

    原标题:如何用css3在app制作出如丝般顺滑的动画 在移动端上实现动画很简单. 在移动端上正确地实现动画也比较简单...如果你采纳我们的建议的话. 虽然现在每个人都会使用 CSS3 实现动画,但许多 ...

  10. html css制作404页面,CSS3绘制404页面

    标题有点噱了... 最近在做一个交通有关的项目, 想做一个类似标志牌的404, 所以就有了这个. 只用的CSS3中的旋转, 效果如下 上代码: Error .circle { width: 200px ...

最新文章

  1. jdbc mysql查询整行信息_JDBC获取数据库各种信息
  2. 百度云android隐藏空间,一招教你使手机端百度网盘中的隐藏空间在文件列表中显示出来...
  3. Spark SQL and DataFrame for Spark 1.3
  4. 数据湖技术 Iceberg 的探索与实践
  5. vSpere虚拟网卡介绍
  6. Angular常用命令行和指令
  7. 扩展AD 用户上传头像
  8. 个人开发—进度记录（十五）
  9. Directx11学习笔记【七】 游戏定时器的实现
  10. 大学计算机—计算思维导论 中国大学mooc 哈尔滨工业大学 测验题目和答案
  11. 武汉大学计算机学院成绩单,2018年武汉大学各学院总评成绩计算公式汇总
  12. SQL简体繁体转换函数
  13. 基于开源软件打造企业网络安全
  14. 2021年全球与中国水上巡航行业市场规模及发展前景分析
  15. C#面向对象编程的学习笔记
  16. 【每日最爱一句】2013.06.10
  17. 无法打开登录所请求的数据库 。登录失败。用户*登录失败。解决办法
  18. 抖音、猫眼网页信息加密分析与应对（1）
  19. 数据结构实验二：7-2 两个有序链表序列的合并
  20. Expected binary or unicode string, got 3

热门文章

  1. linux 清除dns缓存
  2. 【Lua基础系列】之热更新
  3. 【渝粤教育】国家开放大学2018年春季 7389-21T劳动与社会保障法 参考试题
  4. 移动安全-Frida hook安卓So层函数实战
  5. 冯诺依曼结构和现代计算机结构模型
  6. 查看主板型号 两种方法
  7. 教你如何进行嵌入式网络模块的联网操作
  8. android iccid获取不完整,Android调用getSimSerialNumber获取iccid不完整
  9. [学习SLAM]数学中的几何变换-向量叉乘/旋转轴、旋转角度和旋转矩阵/坐标系变换
  10. 整站SEO优化方案：整站优化的方案的流行格式