I am encountering an obstacle while attempting to insert icons into a polygon-shaped div. The problem lies with the padding, as the icons get cut off by the borders of the polygon.
#container {
width: 200px;
height: 200px;
border: 2px solid black;
background: rgba(176, 75, 80, 0.5);
}
#example {
position: absolute;
display: flex;
flex-wrap: wrap;
justify-content: center;
text-align;
center;
top: 50px;
left: 50px;
color: red;
width: 100px;
height: 100px;
background: rgba(76, 175, 80, 0.5);
clip-path: polygon(0 25%, 100% 0%, 83% 60%, 7% 82%);
}<script defer src="https://pro.fontawesome.com/releases/v5.8.1/js/all.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" />
<div id="container">
<div id="example">
<i class="fas fa-star fa-fw filled"></i>
<i class="fas fa-star fa-fw filled"></i>
<i class="fas fa-star fa-fw filled"></i>
<i class="fas fa-star fa-fw filled"></i>
<i class="fas fa-star fa-fw filled"></i>
<i class="fas fa-star fa-fw filled"></i>
</div>
</div>My attempt to use padding: auto did not resolve the issue.