-1

Como faço para criar esse efeito na parte de baixo da imagem? Eu consegui fazer criando uma div com bordas, mas não se ajusta corretamente na parte da responsividade.

Algum exemplo?

inserir a descrição da imagem aqui

1
  • No caso é duplicada da outra, basta inverter os valores que vc vai ter a "seta" apontando para sima
    – hugocsl
    Commented 7/05/2019 às 15:16

1 Resposta 1

3

Você pode usar a propriedade clip-path.

<!DOCTYPE html>
<html lang="pt-br">
<head>
	<meta charset="UTF-8">
	<title>	</title>
	<style>	
		.teste{
			background: url('https://d2v9y0dukr6mq2.cloudfront.net/video/thumbnail/HPWsSXb4xiwrj8lkx/videoblocks-tropical-beach-background-loop_bhjouqunm_thumbnail-full01.png') no-repeat center;
			-webkit-clip-path: polygon(50% 0%, 100% 0, 100% 75%, 51% 71%, 0% 75%, 0 0);
			clip-path: polygon(50% 0%, 100% 0, 100% 75%, 51% 71%, 0% 75%, 0 0);
			
			float: left;
			width: 100%;
			height: 300px;
		}
	</style>
</head>
<body>
	<div class="teste"></div>
</body>
</html>

2
  • Rapaz, perfeito, nunca tinha ouvido falar dessa propriedade.. Muito obg.
    – Clebson
    Commented 7/05/2019 às 16:41
  • 1
    @Wendler Esse site ajuda a criar formas com clip-path bennettfeely.com/clippy Commented 7/05/2019 às 16:48

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