Clip-Path x After/Before

[prisdin 0]

Olá,

Estou com um problema que já tentei resolver de N maneiras e não consigo.

Precisava fazer, via CSS, a imagem a seguir:



Para tal, fiz o html (resumidamente):

<div class="vcard">
     <div class="image"></div>
     <div class="info"></div>
</div>

O Css:

.vcard 
{
	background: #0a1d24;
	width: 309px;
	height: 129px;
	margin: 0 20px 30px 0;
	position: relative;
	border: 1px solid #3b5b6f;
	display: inline-block;
	border-radius: 8px;
	-webkit-clip-path: polygon(50px 0, 100% 0, 100% 100%, 0 100%, 0% 40px);
	clip-path: polygon(50px 0, 100% 0, 100% 100%, 0 100%, 0% 40px);
}
.image
{
        border-top: solid 1px #3b5b6f;
        border-right: solid 1px #3b5b6f;
        float: left;
        width: 116px;
        height: 130px;
        background-repeat: no-repeat;
        background-position: 0 0;
}
.info
{
        margin: 5px 0 0 129px;
        font-size: 12px;
        width: 175px;
        height: 120px;
        overflow: hidden;
}

Basicamente é isso. Acontece que até aí foi tudo certo. Mas, para poder fechar a borda superior (onde foi cortada com o clip-path), eu tentei usar after e before com border transparent na classe .vcard (e tentei também na .image) deixando somente a linha onde deveria ficar. O problema é que quando eu tento usar o after ou o before, o clip-path não funciona, ficando assim:

.vcard:before
{
	content: "";
	width: 38px;
	height: 63px;
	border-width: 0 1px 1px 0;
	border-style: solid;
	border-color: transparent #ff0000 transparent transparent;
	transform: rotate(52deg);
	position: absolute;
	top: -26px;
	left: -6px;
}

(Coloquei a borda vermelha para visualizar melhor)

 

 

Alguém sabe me dizer pq esse problema ocorre? Têm alguma idéia?

 

Abs

[rikaschmitt 54]

Quando eu preciso fazer esse tipo de efeito, tipo uma borda cortada, eu faço uma div geral com overflow hidden e position relative. Dai depois eu crio uma imagem da cor do fundo, em triângulo, e posiciono ela com absolute no canto... sempre funciona hahahaha, meio trabalhoso, mas dá. hahaah

[prisdin 0]

hauhauhauha... então, o problema é que o original é mais ou menos como você disse ^^ a ideia era fazer o possível pra não usar imagens para fazer esse efeito, apenas CSS, porque esse sistema já usa muuuita imagem, então se desse pra diminuir um pouco já seria bom :)

[Wanderson Valerio 102]

Olá, prisdin. Bom, fiz um pequeno ajuste na seguinte parte e acho que com alguns ajustes você chega ao resultado esperado:

.vcard:before {
    content: "";
    width: 0;
    height: 0;

    border-top: 40px solid transparent;
    border-bottom: 40px solid transparent;
    border-right: 40px solid #F00;
 
    position: absolute;
    top: -27px;
    left: -7px;
 
    transform: rotate(45deg);
}

Na cor da borda você usa a cor do fundo em questão.

Espero ter ajudado ;)