1

Estou tentando fazer com que a borda superior da div se sobreponha totalmente a ponta superior da borda da direita, mas não estou obtendo sucesso.

html

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

css

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

Vejam no exemplo abaixo que as bordas no canto superior direito da div se encontram de forma diagonal, gostaria que a borda superior cobrisse totalmente o canto superior direito.

http://jsfiddle.net/zNkcV/

1 Resposta 1

1

Usando pseudo-elemento .caixa::after, é possível obter o efeito desejado:

.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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .