css3中before产生的边和正常div的边不同

Question

我在使用css3的:before时给他定了一个border使能显示，具体如下：

 .try:before {
    content: "demodemodemo";
    position: absolute;
    right: 100%;
    top: 10px;
    border-top: 10px solid green;
    border-right: 10px solid red;
    border-bottom: 10px solid blue;
    border-left: 10px solid yellow;

得到的样式如下：

而我在用一般的div，给他定border时他显示的是这样

可以看出来两个长方体形的边明显不同，前者的每个边是梯形的，后者则都是长方形的。请问这是为什么啊。

Answer 1

......都是一样的，border本来就是你before 那么显示的，只是你下面的颜色一样而已，你给border每个边不同颜色就可以看到了，你要记住border的每条边都把自身的位置占满了的，所以是这样显示的

   .box{
    width: 400px;
    height: 400px;
    border-top: 10px solid green;
    border-right: 10px solid red;
    border-bottom: 10px solid blue;
    border-left: 10px solid yellow;
}
<div class="box">
      
   </div>

Answer 2

一般没问题，是不是后面有什么样式覆盖了前面的