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

一。先上一张图

image

二。上代码

.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;得到的效果图如下

image

现在就应该很清楚了，原来伪类造了一个左移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让下边与原矩形重合，保留下边颜色为原矩形颜色，其他边颜色设为透明

如图

image