creating a css triangle in percentage

Question

I am trying to create a div that is square on the top site and flows into a triangle,

the square part is not so hard, and works fine, but the triangle part is a bit harder. The box needs to change from size with the screen size, in the square i did this by using % in the width and height, but i cannot use the % sign in the border property

The code i have on this moment

HTML

 <div id="overV12" class="menuItem" onclick="scrollToT('#overons')" onmouseover="setHover('overV12')" onmouseout="setOldClass('overV12')"><div class="menuInner">Over V12</div></div>

CSS

div.menuItem 
{
height: 5.38%;
width: 7.44%;
position: fixed;
background-color: rgb(239, 239, 239);
cursor: pointer;
z-index: 12;
text-align: center;
top: 4.3%;
}

div.menuItemHover
{
height: 5.38%;
width: 7.44%;
position: fixed;
cursor: pointer;
z-index: 12;
text-align: center;
top: 4.3%;
background-color: rgb(211, 211, 211);
}

div.menuItemActive
{
height: 7.8%;
width: 7.44%;
position: fixed;
cursor: pointer;
z-index: 12;
text-align: center;
top: 4.3%;
background-color: Black;
color: White;    
}

The JavaScript is used for setting the class: i did this because i use a parralax library and wanted to set the button on "active" on a certain height

i hope someone can help me (and perhaps others) with this problem

jsfiddle example My idea is that when the div is set on class menuItemActive, it will have the arrow, else not This is only when it is set on active

you may also check this answer for a responsive triangle : http://stackoverflow.com/a/24808936/1811992 — web-tiki, Nov 24 '14 at 08:19

apaul · Answer 1 · 2014-06-18T16:42:41.873

7

This uses two overlapping divs to create the triangle and this method to make things fluid while maintaining the aspect ratio.

Working Example

.div1 {
    width:100%;
    height:100%;
    border: 1px solid red;
    position:absolute;
    z-index:2;
}
.div2 {
    width:70%;
    min-height:70%;
    transform:rotate(45deg);
    border:1px solid blue;
    position:absolute;
    left:15%;
    top:65%;
    z-index:1;
}
#container {
    display: inline-block;
    position: relative;
    width: 25%;
}
#dummy {
    padding-top: 100%;
}
#element {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

I left it without a background so you could see how it works.

edited Jun 18 '14 at 16:42

answered Mar 26 '13 at 19:08

apaul

16,092
8
47
82

I was trying to make the arrow fluid as well, but since a border with cant be set with precentage, i had to solve this problem with javascript, i used your fiddle as a base and created this, [JSFiddle](http://jsfiddle.net/bLW5Z/1/) – Edo Post Mar 27 '13 at 08:10
Thank you for your effort, but i your fiddle is not the result i am looking for. I already got it and pasted it in the first command. @apaul34208 i would like you for your effort thoug – Edo Post Mar 27 '13 at 15:34
I like this solution. seems to me a good solution to make the triangle fluid – vals Mar 27 '13 at 22:06

score 1 · Answer 2 · answered Mar 26 '13 at 20:33

You can do triangles in CSS.

Here's a link to an article, outlining the general technique: http://css-tricks.com/snippets/css/css-triangle/. There's also a variety of similar/other approaches for slightly different situations I've found and used, just search "css triangles".

To briefly describe the technique: it uses four borders on an element (if you wanted a down arrow, you'd put this element inside your <div id="overV12">, or depending on the effect, apply it to your inner <div>). Some are transparent, some aren't. By changing the border widths and colors, you can generate CSS triangles, which can be fully customized to form different angle degrees, lengths, etc. I've also seen this concept used to create CSS-only speech bubbles as well as tooltip handles.

I've used this technique extensively, and in my use cases, it worked in every browser (although I do remember having a problem with IE6 on one project).

score 1 · Accepted Answer · answered Mar 28 '13 at 08:12

1

I found the solution by using javascript instead of percentage, Fiddle I hope this can help some other people as well

The java script i used is this:

$(document).ready(setSize());

function setSize() {
   var halfWidth = ($('.div1').width()) / 2;   
   $('.div2').css('border-width', ('50px ' + halfWidth + 'px 0 ' + halfWidth + 'px'));
   $('.div2').css('top', ($('.div1').height()));
}

answered Mar 28 '13 at 08:12

Edo Post

727
7
18

1

For future reference I made a version that resizes as the window changes + some css stuff. http://codepen.io/clouddueling/pen/zlsaJ?editors=110 – Michael J. Calkins Apr 04 '14 at 21:59

score 0 · Answer 4 · answered Mar 26 '13 at 17:55

0

its better to use a background image for custom shaped like this it'll make it easier to manager and you can make it adjust itself for different resolutions easily

answered Mar 26 '13 at 17:55

ManZzup

526
4
12

if i use a image (witch i did in the beginning) then it stretches out and gets quit ugly on bigger screens. – Edo Post Mar 26 '13 at 18:00
for what exact purpose is this used? a button? you problem with pixxelting is that using a small original image use a PNG of about 256*256 and then use the code to make is smaller so assuming that is is a button, even at highest resolutions it would be in good shape – ManZzup Mar 26 '13 at 18:04
it is beeing used for a menu button, and i am not sure if the size of the button image bigger is then the requestd size on the screen, i will look into this tommorow. (when i am in the presence of my pc again) – Edo Post Mar 26 '13 at 18:07

creating a css triangle in percentage

4 Answers4