您现在的位置:首页 >> 前端 >> 内容

html中css使用div绘制三角形

时间:2017/3/24 9:11:51 点击:

  核心提示:在很多网页中经常会有三角形角标作为导航指示器使用,比如sketch官网就有如下图 注意licensing前面的三角形角标,那么他是如何实现的呢,让我们一起来探索下吧!对于一个常规的p框而言,给其设置正...

在很多网页中经常会有三角形角标作为导航指示器使用,比如sketch官网就有如下图

html中css使用div绘制三角形

注意licensing前面的三角形角标,那么他是如何实现的呢,让我们一起来探索下吧!

对于一个常规的p框而言,给其设置正常宽高,并设置border

.p__custom

{

position:relative;

width: 32px;

height: 32px;

border-top:32px solid red;

border-bottom: 32px solid black;

border-left:32px solid yellow;

border-right:32px solid blue;

}

为了方便展示,这里的border设置了不同属性

来看看会得到什么样式吧

html中css使用div绘制三角形

如图所示,会有一个正常显示的方框,其外上下左右各有border,而对于每一个角所多出的则由相邻两个border平分

那么,如果我们把p设置成高度为0会怎么样呢?

.p__no__height

{

position:relative;

width: 32px;

height: 0px;

border-top:32px solid red;

border-bottom: 32px solid black;

border-left:32px solid yellow;

border-right:32px solid blue;

}
html中css使用div绘制三角形

方形只剩一条横线

同理,如果设置width为0,height仍为32px,那么会发现这个p框神奇得被拉高啦,变瘦啦

html中css使用div绘制三角形

细思一下,如果没有宽高会怎么样,哇 世界上会存在一个没有尺寸的物体吗?

.p__neither {

position:relative;

width: 0px;

height: 0px;

border-top:32px solid red;

border-bottom: 32px solid black;

border-left:32px solid yellow;

border-right:32px solid blue;

}
html中css使用div绘制三角形

竟然全变成三角形了,好吧,这是意料之中的事。

咦,这么说的话,我好像想到了怎么去绘制一个三角形角标了

.p__triangle {

position:relative;

width: 0px;

height: 0px;

border-top: 32px solid transparent;

border-bottom: 32px solid transparent; //设置上边框和下边框为透明

border-left:32px solid yellow;

}
html中css使用div绘制三角形

设置上方和下方的border为透明,左边的仍然留着就会发现,三角形已经出来啦,当然,不止这一种,其他的留待慢慢尝试

再来过一遍流程

html中css使用div绘制三角形

哎,这个三角形好像和我们想象中的不一样,喔 对了好像我们要的是等边三角形对吧

喔喔是喔,让我想想勾股定理

.p__triangle__beautiful {

position:relative;

width: 0px;

height: 0px;

border-top: 32px solid transparent;

border-bottom: 32px solid transparent;

border-left:55.36px solid yellow;

}

55.36怎么来的?

就是32*1.732

1.732怎么来的?

查查根号表

当当当当….

html中css使用div绘制三角形

等边三角形来啦!

是不是换个颜色 缩小点就能用啦!

Tags:HT TM ML L中 
作者:网络 来源:不详