How to create a pointy triangle border?

The border of the social media icons.

HTML: <div class="social1">
<span>SHARE</span>
<img src="icon-facebook.svg">
<img src="icon-twitter.svg">
<img src="icon-pinterest.svg">
</div>

CSS: .social1{
background-color: hsl(217, 19%, 35%);
transform: translate(125px, -105px);
padding:15px;
border-radius: 10px;
width:250px;
display: flex;
justify-content: space-around;
cursor: pointer;
}

.social1 span{
color:hsl(212, 23%, 69%);
letter-spacing: 0.2rem;
font-size: 0.8rem;
}
desktop-active-state.jpg
Was this page helpful?