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;
}
4 Replies
This is my project.
You can use a psuedo element and use a clip-path (you can make one easily with a clip-path css generator if you google it) or create a psuedo element as a square and rotate it 45 deg
without pseudo or clippath
i used just background and clipped it to the padding-box and border-box
https://codepen.io/MarkBoots/pen/xxeGLXj
Gosh some of you guys blow my mind with these gradients. You and @cubiq specifically literally have me shaking my head 🤯