-1
How do I create this effect at the bottom of the image? I was able to do it by creating a border div, but it doesn’t fit properly in the responsiveness part.
Some example?
1 answer
3
You can use the property 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>-
Boy, perfect, I’ve never heard of that property.. Very obg.
-
1
@Wendler This site helps to create shapes with clip-path https://bennettfeely.com/clippy/
Browser other questions tagged html css html5 css3
You are not signed in. Login or sign up in order to post.
In case it is duplicated from the other, just invert the values you will get the "arrow" pointing to Ima
– hugocsl