css border实现三角形

一、border使用方法

1.1.css
.border-box-1 {
  width: 100px;
  height: 100px;
  border: 2px solid #f00;
  border-style: dotted solid double dashed;
  /*上边框是点状dotted 右边框和左边框是实线solid 下边框是双线double*/
 }

这里写图片描述

1.2.html
<div class="border-box-1"></div>

二.border 三角形

2.1.三角形原理,我们来看一个普通的底部边框
width: 100px;
height: 100px;
border-bottom: 12px solid #f00;

这里写图片描述

2.2.我们在右边添加一个边框,细心留意两个border的交界就是一个斜线
width: 100px;
height: 100px;
border-bottom: 12px solid #f00;
border-right: 12px solid #00f;

这里写图片描述

2.3.我们在左边边添加一个边框
width: 100px;
height: 100px;
border-bottom: 12px solid #f00;
border-right: 12px solid #00f;
border-left: 12px solid #0f0;

这里写图片描述

2.4.试想一下,我们把左右边框变成了透明的,是怎么样的呢?
width: 100px;
height: 100px;
border-bottom: 12px solid #f00;
border-right: 12px solid #transparent;
border-left: 12px solid #transparent;

这里写图片描述

已经变成了梯形了啊,我们怎么样把她变成三角形呢?
2.5.我们把宽设置为0
width: 0;
height: 0;
border-bottom: 12px solid #f00;
border-right: 12px solid transparent;
border-left: 12px solid transparent;

这里写图片描述

一个向上三角形已经出现了啊,哈哈哈
2.6.向下三角形
width: 0;
height: 0;
border-bottom: 12px solid #f00;
border-right: 12px solid transparent;
border-left: 12px solid transparent;

这里写图片描述

2.7.向左三角形
width: 0;
height: 0;
border-right: 12px solid #f00;
border-bottom: 12px solid transparent;
border-top: 12px solid transparent;

这里写图片描述

2.7.向右三角形
width: 0;
height: 0;
border-left: 12px solid #f00;
border-bottom: 12px solid transparent;
border-top: 12px solid transparent;

这里写图片描述

没有更多推荐了,返回首页