1. 犀牛前端部落首页
  2. CSS百科

CSS3常见技巧(二):如何用CSS3来实现三角形?

如何使用CSS3来画一个三角形经常令人非常感到困惑,其实原理上是宽度相等的边距以45度来连接。

首先看第一个图

CSS3常见技巧(二):如何用CSS3来实现三角形?
如何用CSS3来实现三角形图解1

这个是正常情况下,如果我们这个时候把顶部的边距设为none的话就会显示下面这种情况

CSS3常见技巧(二):如何用CSS3来实现三角形?
如何用CSS3来实现三角形图解2

再把content宽度设为0

CSS3常见技巧(二):如何用CSS3来实现三角形?
如何用CSS3来实现三角形图解3

再把content高度设为0

CSS3常见技巧(二):如何用CSS3来实现三角形?

这个时候,很容易联想到把左右边距颜色设为透明色(transparent)

CSS3常见技巧(二):如何用CSS3来实现三角形?

大致过程就是如此,总结一下就是如果我想到一个三角形,比如它的方向就是向左的,那么只要设置它相反放下的颜色不为透明,并把其他两个方向设为透明即可。
代码如下:

.right{
width:0;
height:0;
border-top:20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid pink;
}
.top{
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid pink;
}
.left{
width: 0;
height:0;
border-right: 20px solid pink;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent
}
.bottom{
width: 0;
height: 0;
border-top: 20px solid pink;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}

实现效果如图

CSS3常见技巧(二):如何用CSS3来实现三角形?
实现效果图

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/580.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注