i want that the triangle will be transparent like this:
i tried to change this line:
border-color: transparent transparent #fff transparent;
to
border-color: transparent transparent transparent transparent;
but its not showing the triangle anymore.
CodePudding user response：
Let me guess, you want the white color triangle to be transparent, right? The white color triangle is actually the border-color #fff from #shape_1 .triangle selector.
Actually, you don't need the triangle div, you can use CSS clip-path instead.
Solution:
Remove the triangle div from html
<div id="topArea">
<div id="shape_1" class="blue">
</div>
</div>
Add clip-path on your css #shape_1.blue selector
#shape_1.blue {
...
...
...
...
...
clip-path: polygon(0 0, 100% 0, 60% 100%, 0% 100%);
}
CodePudding user response：
Try using svg
<html>
<body>
<style>
body{
background: #AA3A3B;
}
.triangle{
fill: transparent;
stroke: white;
stroke-width: 2;
}
</style>
<div class="triangle-container">
<svg height="500" width="500">
<polygon points="250,60 100,400 400,400" class="triangle" />
Sorry, your browser does not support inline SVG.
</svg>
</div>
</body>
</html>
