2

I am looking to make a triangle button in the top-right of my website (fixed position). It's just a icon over top of a background colour with hover effect. I was wondering if there is a way to get a angled div or if it needs to be a background image?

CSS

#top-btn {
  position: fixed;
  top: 0;
  right: 0;
  background-color: red;
}

HTML

...

<div id="top-btn">icon</div>

EDIT - visual representation. positioned top right of window

enter image description here

user3550879
  • 3,389
  • 6
  • 33
  • 62

6 Answers6

5

Updated for triangle on right with rotated text

Use the border trick to create a triangle in CSS: DEMO

HTML:

<div id="corner-triangle">
    <div class="corner-triangle-text"><a href="http://shop.mimijumi.com/" target="_blank"><span class="corner-triangle-firstline">Free</span><br>Shipping!</a></div>
</div>

CSS - note comments for adjusting triangle size and color; also, remove transform: rotate(45) lines if you don't want the text rotated:

div#corner-triangle {
  display: block;
  width: 100px;
  height: 100px;
  border-style: solid;
  border-width: 0 200px 200px 0; /* adjust for size of triangle */
  border-color: transparent #da0039 transparent transparent; /* adjust for color of triangle */
  position: fixed;
  top: 0;
  right: 0;
  z-index: 99999;
  color: white;
  text-shadow: 0 0 25px 9px #fff;
  -webkit-filter: drop-shadow(0 1px 9px #000000);
  filter: drop-shadow(0 1px 9px #000000);
}
div#corner-triangle .corner-triangle-text {
  position: relative;
  font-size: 2.1em;
  top: 0;
  right: -90px;
  font-family: sans-serif, "Helvetica Neue", Helvetica, Arial;
  font-weight: 200;
  line-height: 1.1;
  -webkit-transform: rotate(45deg); 
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
div#corner-triangle .corner-triangle-text span.corner-triangle-firstline {
  margin-left: 29px;
}
div#corner-triangle .corner-triangle-text a {
  color: white;
}
div#corner-triangle .corner-triangle-text a:hover,
div#corner-triangle .corner-triangle-text a:link,
div#corner-triangle .corner-triangle-text a:visited,
div#corner-triangle .corner-triangle-text a:active,
div#corner-triangle .corner-triangle-text a:focus {
  text-decoration: none;
}
Alex
  • 34,699
  • 13
  • 75
  • 158
3

Basically, you create an element with width and height of zero, and use borders to create the triangles.

[enter image description here]

This article shares some code. https://css-tricks.com/snippets/css/css-triangle/

.arrow-down {
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;

    border-top: 20px solid #f00;
}
savinger
  • 6,544
  • 9
  • 40
  • 57
  • unfortunately, this is the wrong type of triangle I am looking for, I will update my question with imagery to help support my question – user3550879 Aug 04 '15 at 20:15
2
.triangle {
  border-width: 50px;
  border-style: solid;
  border-color: red red transparent transparent;
  position: fixed;
  top:0;
  right:0;
  width:0;
  height:0;
}

Working fiddle.

savinger
  • 6,544
  • 9
  • 40
  • 57
1

If you're asking how to make a triangle without using an image, there's these html characters: ▲ &#9650; and ▼ &#9660;

You can also make triangles in css by making an element with a width and height of zero, and giving it a border on only 3 sides, with 2 sides being transparent.

.arrow-down {
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid black;
}

More detail here https://css-tricks.com/snippets/css/css-triangle/

chilleren
  • 81
  • 5
  • I basically need the background to be the triangle not so much one created inside the div. I was wondering if this could be done without a custom background image cause then I could center the 'icon' better than if it was a full square – user3550879 Aug 04 '15 at 20:20
1

This is what I came up with:

.corner{
    width: 0; 
    height: 0; 
    border-top: 50px solid rgb(227, 37, 37);
    border-bottom: 50px solid transparent; 
    border-left: 50px solid transparent; 
    border-right:50px solid rgb(227, 37, 37); 
    float:right; 
}

.corner:hover{
    border-color: #A00404 #A00404 transparent transparent;
    transition: border-color 1s;
}

Here is the JSfiddle demo

Ahs N
  • 8,233
  • 1
  • 28
  • 33
0

Depending on what you need to do with it, the easy way would be to use a character like the following: &utrif;

You cannot just copy and paste it though. Use the following in your code to display this character:

&utrif;

It may not suit every situation, but I've used it. It's as easy to place as any other text, and you can easily resize it, apply colour, background, or shadow to it, because it's just text.

Here's a list of all the characters you can use, depending of course on the font you're using, which will be a limitation of this method I think:

http://dev.w3.org/html5/html-author/charref

Another limitation would be if you want to place text or an icon on top of it. I'm sure it's possible, but there are better methods if that's your intention.

gordonzed
  • 31
  • 7
  • On second thought, I'm assuming what you want is a triangle fitting into the corner of the screen, isn't it? In which case, my answer is useless, but I'll leave it here as a curiosity, or in hopes that maybe someone will find it useful. – gordonzed Aug 04 '15 at 20:16
  • exactly what I am looking for, fitting into the corner of screen – user3550879 Aug 04 '15 at 20:18