如何用css3画一个有边框的三角形

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

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

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

HTML：

/*向上*/

.triangle_border_up{

width:0;

height:0;

border-width:0 30px 30px;

border-style:solid;

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

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增加一个阴影：

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写带边框的三角形

.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：

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)东北、东南、西北、西南三角形的写法

怎么利用CSS3绘制三角形

1、新建一个html5网页，名称为index.html，在

代码中写上四个div，分别是向上、向下、向左，向右四个三角形，代码如下：

2、然后新建一个css文件style.css，并在index.html中引入，引入代码： rel="stylesheet" type="text/css" href="style.css">

3、先做向上的三角形，这里有两种写法，大家可以参考下。在css文件中输入以下代码：

第一种： .triangle-up {

width:0;

height:0;

border-left:30px solid transparent;

border-right:30px solid transparent;

border-bottom:30px solid #fff;

第二种：.triangle-up {

width:0;

height:0;

border:30px solid transparent;

border-bottom-color:#fff;

4、接下来写向下的三角形，继续在css文件中输入以下代码：

.triangle-down {

width:0;

height:0;

border-left:20px solid transparent;

border-right:20px solid transparent;

border-top:20px solid #0066cc;

5、然后是向左的三角形，代码为：

.triangle-left {

width:0;

height:0;

border-top:30px solid transparent;

border-bottom:30px solid transparent;

border-right:30px solid yellow;

6、最后是向右的三角形，代码为：

.triangle-right {

width:0;

height:0;

border-top:50px solid transparent;

border-bottom: 50px solid transparent;

border-left: 50px solid green;

css画三角形(怎么用css画三角形)相关推荐

  1. php绘制一个三角形,如何利用css或html5画出一个三角形？两种不同的制作三角形方法（代码实例）...

    我们在平时的前端开发的时候,有时候是需要一些小图形来丰富一下页面效果,比如:下拉列表的倒三角图形.那么这样的一个三角形是如何制作出来的,本章给大家介绍如何利用css或html画出一个三角形?两种不同的 ...

  2. 前端怎么画三角形_用CSS画一个三角形

    作者 | 李银城 三角形的场景很常见,打开一个页面可以看到各种各样的三角形: 由于div一般是四边形,要画个三角形并不是那么直观.你可以贴一张png,但是这种办法有点low,或者是用svg的形式,但是 ...

  3. html画一个倒三角,css 三角形画法

    css 三角形画法 项目中,会有一些边角的位置使用的三角形的地方,这时候如果没有刻意改变,可使用 css 来实现. 使用 border 实现三角形的画法: triangle 实现 #triangle- ...

  4. html中右侧三角形代码,如何使用css在标签的右侧添加一个三角形？

    我想在右侧添加一个小三角形,以便与输入字段的开头重叠,但我一直未能.这里是我的代码:如何使用css在标签的右侧添加一个三角形? HTML: First Name Last Name Email Pas ...

  5. css 绘制三角形_解释CSS形状：如何使用纯CSS绘制圆，三角形等

    css 绘制三角形 Before we start. If you want more free content but in video format. Don't miss out on my Y ...

  6. python 生成excel像素画_【译】只用 CSS 就能做到的像素画/像素动画

    只用 CSS 就能做到的像素画/像素动画 这篇文章将会介绍只用 CSS 就能制作像素画·像素动画的方法.虽说纯 CSS 就能做到,但是为了更高的可维护性,也会顺便介绍使用 Sass 的制作方法. 上面 ...

  7. python编程怎么画三角形的外接圆_python画出三角形外接圆和内切圆的方法

    摘要:这篇Python开发技术栏目下的"python画出三角形外接圆和内切圆的方法",介绍的技术点是"Python._和__.三角形.三角",希望对大家开发技术 ...

  8. ARM6818开发板画任意矩形，圆形，三角形，五角星，6818开发板画太极，画五星红旗（含码源与思路）

    本文利用6818开发板完成LCD屏上绘制任意的矩形,圆形,三角形或五角星形图案,还有绘制太极,五星红旗的方案. 目录 映射 绘制矩形 代码思路 代码实现 实践出真知 绘制圆形 代码思路 代码实现 绘制 ...

  9. CSS：N种使用CSS 绘制三角形的方法

    目录 6种使用 CSS 实现三角形的技巧 1.使用 border 绘制三角形 2.使用 linear-gradient 绘制三角形 3.使用 conic-gradient 绘制三角形 4.transf ...

最新文章

  1. Rust即将发布1.0版本，Go持续获得关注：如何在新生语言之间做出抉择
  2. php执行rsync,使用rsync工具构建php项目管理平台，rsync项目管理
  3. html 商品展示框
  4. IE edge是怎么了？？
  5. Android 系统（161）---N/O版本上图库打开一张图片，图片从模糊到清晰的时间太长
  6. NULS与Fortube正式达成战略合作
  7. 理想职业计算机程序英语作文,Choosing the Right Career理想的职业英语作文
  8. 第D题 把手放在键盘上时，稍不注意就会往右错一位。
  9. RK3288的GTxx触摸屏驱动调试
  10. 红黄绿灯控制系统c语言,微机课设-红、黄、绿灯的控制系统设计.doc
  11. QListView的使用方法
  12. 微信开发者工具测试方法
  13. Python—猫眼电影票房爬虫实战 轻松弄懂字体反爬！
  14. office 2016 官方完整版
  15. 百分比布局参照物的总结
  16. ESP32控制器使用SX1278 LoRa模块的方法
  17. vuepress-theme-reco 博客主题使用
  18. Python selenium自动获取URP教务系统课表并以图片形式保存
  19. DB2控制中心菜单中文乱码问题
  20. 尚硅谷《全套Java、Android、HTML5前端视频》

热门文章

  1. 如何优雅地焊接第一块PCB
  2. #信用卡#201芯片磁条复合卡写卡技术成功突破及原理解析
  3. 关于Sass和Less牵扯的问题
  4. 怎样使用iconv-lite解决中文乱码问题
  5. G. Counting Shortcuts
  6. 推荐10个小众实用的办公工具，解决你的各种办公需求
  7. 李宏毅2022ML第四周课程笔记
  8. linux系统获取4G模块IMEI号
  9. 中科蓝讯蓝牙: 编译环境安装_ToolChain及CodeBlock(IDE)的安装
  10. C语言编写程序阶乘的和