triangle effect in div with css3, how is it?

Asked

Viewed 228 times

0

wanted to know if you have how to leave a similar div with that effect, if you have how someone can give an example? I have no idea where to start

inserir a descrição da imagem aqui

  • 1

    Possible duplicate of Create a triangle with CSS

  • 1

    Bruno gives to do with edges, clip-path, svg, linear-gradient, skwe, etc... take a look at this answer that I marked as duplicate

  • sorry, more and totally different than I hope

  • 1

    No Bruno, it is completely the same as the other one, only instead of using the effect in a rectangle in the other answer was used in a square, so much so that the answer they gave here uses precisely the techniques of the edges as I mentioned, and that tb was used in the other answer. I guess you didn’t even bother to read the other answer...

1 answer

1


Okay buddy, just adjust the sizes of the border in question...

	.lado1{
		
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  width: 0; 
  height: 0; 

  border-left: 280px solid transparent;
  border-right: 1px solid transparent;
  border-bottom: 90px solid #0EF41A;
	}	
	
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
</head>
<body>
	<div class="lado1"></div>
</body>
</html>

  • very good, I’ll do the tests here

  • ask for a correct ticket if you have answered your question

  • in fact, I would need this not to have a widtth set, because my intention is to make a volume slide, it would decrease and increase the size, understood ? , tried to use border-left-width but it didn’t work

  • what will set is not the width but the border-left, the width is zero!

Browser other questions tagged

You are not signed in. Login or sign up in order to post.