Pure CSS triangle with semi-transparent border. Possible?
This still needs some work, but here's the general idea:
Use a pseudo-element, rotate it 45deg and apply the styling to that:
.arrow {
bottom: -25px;
left: 30px;
width: 40px;
height: 40px;
position: absolute;
overflow: hidden;
}
.arrow:after {
content: ' ';
display: block;
background: red;
width: 20px;
height: 20px;
transform: rotate(45deg);
position: absolute;
top: -19px;
left: 3px;
background: #999;
border: 5px solid rgba(0, 0, 0, 0.2);
background-clip: padding-box;
}
Here's the fiddle: http://jsfiddle.net/yZ3vB/
The problem with this is that the borders overlap, making it darker by the edges.
This could probably be remedied by adding another element though.
Update: Yes! Here you go: http://jsfiddle.net/sJFTT/
Update 2: You don't even need that additional element. You can use the pseudo element from the main box:
.ui-overlay-content:after {
content: ' ';
border-width: 13px;
border-color: #999 transparent transparent;
border-style: solid;
bottom: -10px;
left: 30px;
width: 0;
height: 0;
position: absolute;
}
Here's the fiddle: http://jsfiddle.net/6v9nV/
Update 3: Actually, you can do all this with just a single element and no transform, by using both pseudo-elements - the before
and the after
:
.speech-bubble {
background: #999;
background: linear-gradient(top, #444 0%,#999 100%);
background-clip: padding-box;
border: 5px solid rgba(0, 0, 0, 0.2);
padding: 20px;
width: 200px;
height: 100px;
position: relative;
}
.speech-bubble:before{
content: ' ';
border-color: rgba(0, 0, 0, 0.2) transparent transparent;
border-style: solid;
border-width: 17px;
position: absolute;
bottom: -39px;
left: 16px;
}
.speech-bubble:after{
content: ' ';
border-color: #999 transparent transparent;
border-style: solid;
border-width: 13px;
position: absolute;
bottom: -26px;
left: 20px;
}
Here's the fiddle: http://jsfiddle.net/95vvr/
P.S. Don't forget the vendor prefixes in production!
calebo
Updated on June 13, 2022Comments
-
calebo almost 2 years
Is it possible to draw an arrow that has semi-transparent border around it just using css?
Heres a fiddle of my effort so far: http://jsfiddle.net/calebo/fBW4u/
CSS:
.ui-overlay { padding-bottom: 10px; position: relative; } .ui-overlay-content { background: #999; color: #000; padding: 8px; border-radius: 4px; border: 5px solid rgba(0, 0, 0, 0.2); background-clip: padding-box; height: 100px; width: 200px; } .arrow { border-color: #999 transparent transparent; border-style: solid; border-width: 10px 10px 0; bottom: 5px; left: 15px; width: 0; height: 0; position: absolute; overflow: hidden; }
-
Admin over 12 yearsThe question is to implement it using only CSS and not images.
-
calebo over 12 yearsThanks for that, do you know if it's possible to have the border radius applied to '.ui-overlay-content' as well, not just the semi-transparent border.
-
Avinash over 12 yearsNo we cannot implement it using CSS.
-
Admin over 12 yearsYou should have a look at the answers other users have provided.
-
calebo over 12 yearssorry, i only need to support mobile safari.
-
Nikos over 7 yearsanything simple that could be added to github.com/quantumjs/smart-terminal, currently the borders can not use 'border-colour:transparent'