使用CSS制作斜边矩形原理分析

一。先上一张图

使用CSS制作斜边矩形原理分析_第1张图片

二。上代码

.pick{
  position: absolute;
  z-index: 999;
  left: 0;
  top: 0;
  background: #fd3a51;
  line-height: 20px;
  padding: 0 6px 0 8px;
  color: #fff;
  font-size: 20px;
  text-align: center;
}

.pick::after{
  content: ' ';
  position: absolute;
  top: 0;
  right: -8px;
  border-width: 20px 8px;
  border-style: solid;
  border-color:#fd3a51 transparent transparent transparent;
}

三。原理分析

为什么这样普普通通的两段css就能实现斜边的效果呢?

首先pick类里面就是中规中矩的画一个红色背景的矩形,真正起作用的是after伪类里面的border-color,如果现在这个设置还看不出所以然,我把border-color改成如下border-color:#fd3a51 black blue green;得到的效果图如下

使用CSS制作斜边矩形原理分析_第2张图片

现在就应该很清楚了,原来伪类造了一个左移8px的矩形,上下边厚度为20px等于元矩形高度,左右边厚度为8px刚好为左移8px的宽度,这样一个厚度的四条边使得每条边厚度形成一个三角形的效果(不得不佩服第一个发现此效果的人真是聪明啊),然后把不相关的边框设置为透明色隐藏,就得到斜边的效果了。

根据此原理,不难得出向右倾斜的边应该这么做

.self-pick::after{
  content: ' ';
  position: absolute;
  top: -20px;
  right: -8px;
  border-width: 20px 8px;
  border-style: solid;
  border-color:transparent transparent #fd3a51 transparent;
}

上移20px让下边与原矩形重合,保留下边颜色为原矩形颜色,其他边颜色设为透明

如图

使用CSS制作斜边矩形原理分析_第3张图片

 

你可能感兴趣的:(CSS,css3,css,html)