Techolac - Computer Technology News
  • Home
  • Internet
  • Business
  • Computers
  • Gadgets
  • Lifestyle
  • Phones
  • Travel
  • Tech
  • More
    • Automotive
    • Education
    • Entertainment
    • Health
    • SEO
    • Linux
    • WordPress
    • Home Improvement
    • How to
    • Games
No Result
View All Result
  • Home
  • Internet
  • Business
  • Computers
  • Gadgets
  • Lifestyle
  • Phones
  • Travel
  • Tech
  • More
    • Automotive
    • Education
    • Entertainment
    • Health
    • SEO
    • Linux
    • WordPress
    • Home Improvement
    • How to
    • Games
No Result
View All Result
Techolac - Computer Technology News
No Result
View All Result
Home Internet

Creating Triangles in CSS

by Editorial Staff
August 4, 2020
in Internet
Reading Time: 2 mins read

I’ve come across a few techniques and tips in my career, while working at my last gig a co-worker pointed me to this technique. I believe this was originally discovered by the legendary Eric Meyer, but I couldn’t find much documentation about it on the web so I thought I would describe it here.

How it works

Few people realize when a browser draws the borders, it draws them at angles. This technique takes advantage of that. One side of the border is colored for the color of the arrow, and the rest are transparent. Then you set the width of the border to something large, the ones above are 20px. To demonstrate here is a div with all sides colored.

<div class="css-arrow-multicolor"></div>

.css-arrow-multicolor {
  border-color: red green blue orange;
  border-style:solid;
  border-width:20px;
  width:0;
  height:0;
}

As you can see there are triangles hidden in that square. These triangles are right triangles with a little tweaking with the border sizes you can get acute triangles.

.css-arrow-acute {
  border-color: red green blue orange;
  border-style:solid;
  border-width:25px 10px 15px 30px;
  width:0;
  height:0;
}

With a little creativity and tweaking there are lots of shapes that can be made.
border-style:dotted;

border-style:dashed;

border-style:outset;

border-style:inset;

border-style:ridge;

border-style:groove;

border-style:double;

Now for application:

This is a classic chat bubble, no images used.


<div class="chat-bubble">
  Buongiorno!
  <div class="chat-bubble-arrow-border"></div>
  <div class="chat-bubble-arrow"></div>
</div>

.chat-bubble {
  background-color:#EDEDED;
  border:2px solid #666666;
  font-size:35px;
  line-height:1.3em;
  margin:10px auto;
  padding:10px;
  position:relative;
  text-align:center;
  width:300px;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  -moz-box-shadow:0 0 5px #888888;
  -webkit-box-shadow:0 0 5px #888888;
}

.chat-bubble-arrow-border {
  border-color: #666666 transparent transparent transparent;
  border-style: solid;
  border-width: 10px;
  height:0;
  width:0;
  position:absolute;
  bottom:-22px;
  left:30px;
}

.chat-bubble-arrow {
  border-color: #EDEDED transparent transparent transparent;
  border-style: solid;
  border-width: 10px;
  height:0;
  width:0;
  position:absolute;
  bottom:-19px;
  left:30px;
}

This technique doesn’t work in ie6 as is, mainly because ie6 doesn’t allow transparent borders, but there is a fix for that. What you need to do is give the “transparent” sides a completely different color like pink and then use filter: chroma to turn that color transparent.

  /* IE6 */
.chat-bubble-arrow {
    _border-left-color: pink;
    _border-bottom-color: pink;
    _border-right-color: pink;
    _filter: chroma(color=pink);
}

If you enjoyed reading this post, check out these posts

Related Posts

Can AI Spot AI? Inside the Battle Against Synthetic Content

Can AI Spot AI? Inside the Battle Against Synthetic Content

June 13, 2025
Why CSPM Is the Unsung Hero of Enterprise Cloud Security

Why CSPM Is the Unsung Hero of Enterprise Cloud Security

June 3, 2025

Insider secrets to safeguarding your digital privacy

May 19, 2025

BigCharts Stock Charting and Screening Alternatives

May 13, 2025

Veo Camera Alternatives Recording and Analysing Sports Matches

May 8, 2025

Liner AI: The AI Search Engine and Alternatives

May 8, 2025

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recent Articles

  • The Tech Behind AI Girlfriends: Voice, Personality, and Emotion
  • Behind the Algorithm: How AI Creates Lifelike Headshots
  • Can AI Spot AI? Inside the Battle Against Synthetic Content
  • Biometric Banking: Why Your Face, Fingerprint, and Voice Are the New PIN
  • The Revolution in Telecommunications: How technology is changing connections
  • Understanding the Differences: BACS vs CHAPS Payment Systems Explained
  • Why CSPM Is the Unsung Hero of Enterprise Cloud Security

Related Posts

None found

  • DashTech
  • TechDaddy
  • Terms and Conditions
  • Disclaimer
  • Write for us

© Techolac © Copyright 2019 - 2022, All Rights Reserved.

No Result
View All Result
  • Home
  • Internet
  • Business
  • Computers
  • Gadgets
  • Lifestyle
  • Phones
  • Travel
  • Tech
  • More
    • Automotive
    • Education
    • Entertainment
    • Health
    • SEO
    • Linux
    • WordPress
    • Home Improvement
    • How to
    • Games

© Techolac © Copyright 2019 - 2022, All Rights Reserved.