How do you make the top edge of the div overlap the top tip of the right edge?

Navigation
1

I'm trying to make the upper border of div totally overlap the top edge of the right edge, but I'm not succeeding.

html 

<div class="caixa"></div>

css 

.caixa{
    width:100px;
    height:100px;
    border-top:14px solid red;
    border-right:14px solid blue;
}

See in the example below that the borders in the upper right corner of the div lie diagonally, I would like the top border to completely cover the top right corner.

link

    
asked by anonymous 31.03.2014 / 23:32

1 answer

1

Using pseudo-element .caixa::after , you can achieve the desired effect: 

.caixa{
width:100px;
height:100px;
border-top: 14px solid red;
position: relative;

} 

.caixa::after {
    content: "";
    position: absolute;
    bottom: 0; top: 0px; left: 0; right: 0;
    border-right: 14px solid blue;
}

JS Fiddle

    
31.03.2014 / 23:55
Recording PList in Device How to make a popup with youtube text and video?