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; }
No description
4 Replies
Jonah
Jonah•9mo ago
This is my project.
No description
vince
vince•9mo ago
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
MarkBoots
MarkBoots•9mo ago
without pseudo or clippath i used just background and clipped it to the padding-box and border-box https://codepen.io/MarkBoots/pen/xxeGLXj
clevermissfox
clevermissfox•9mo ago
Gosh some of you guys blow my mind with these gradients. You and @cubiq specifically literally have me shaking my head 🤯
Want results from more Discord servers?
Add your server