I'm trying to make a div with custom shape. This is what I'm trying to do: div
But couldn't achive what I want.
What I tried: 1)
.street-sign {
background-color: #e9f7ea;
border: 1px solid #3ca649;
width: 100px;
height: 23px;
display: flex;
align-items: center;
justify-content: center;
border-top-right-radius: 50%;
border-bottom-right-radius: 50%;
}<div class="street-sign">5th Avenue</div>2)
.street-sign {
background-color: #e9f7ea;
border: 1px solid #3ca649;
width: 100px;
height: 23px;
display: flex;
align-items: center;
justify-content: center;
clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
}<div class="street-sign">5th Avenue</div>I would use an SVG background image to implement this. Yokel's encoder is a useful tool.
.street-sign {
width: 100px;
aspect-ratio: 655/150;
display: flex;
align-items: center;
justify-content: center;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 655 150'%3E%3Cpath style='stroke-width: 6px; stroke: rgb(41, 159, 69); fill: rgb(229, 247, 231);' d='M 43.989 4.064 L 587.406 4.047 C 607.936 4.252 614.586 8.562 625.792 22.347 C 625.792 22.347 651.191 52.761 651.01 74.167 C 650.842 94.036 622.234 131.218 622.234 131.218 C 612.984 141.926 604.84 145.856 587.406 145.947 L 43.989 145.954 C 21.898 145.954 3.989 128.045 3.989 105.954 L 3.989 44.064 C 3.989 21.973 21.898 4.064 43.989 4.064 Z'/%3E%3C/svg%3E");
background-size: 100%;
}<div class="street-sign">5th Avenue</div>