Geek Answers Handbook

Creating a css triangle in percent

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 complex and works fine, but the triangle part is a little more complicated. The box should vary in size with the size of the screen, in the square I did this using% in width and height, but I can not use the% sign in the border property

The code that I have at 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; }

JavaScript is used to set the class: I did this because I used the parralax library and wanted to set the "active" button at a certain height

Hope someone can help me (and maybe others) with this problem

jsfiddle example My idea is that when a div is set to class menuItemActive, it will have an arrow, otherwise it only happens when it is set to active

+6
source share
4 answers

I found a solution using javascript instead of percent, Fiddle I hope this helps other people as well.

The java script used is:

 $(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())); }
+1
source

It uses two overlapping divs to create a triangle and this method to make things flow while maintaining proportions.

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 can see how it works.

+6
source

You can make triangles in CSS.

Here is a link to an article that outlines a common technique: http://css-tricks.com/snippets/css/css-triangle/ . There are also many similar / other approaches for slightly different situations that I found and used, just search for “css triangles”.

To briefly describe the technique: it uses four borders for the element (if you want a down arrow, you must put this element in your <div id="overV12"> or depending on the effect, apply it to your inner <div> ). Some of them are transparent, some are not. By changing the widths and colors of borders, you can create CSS triangles that can be fully customized to form different degrees, lengths, etc. I also saw this concept used to create CSS-only speech bubbles, as well as tooltip pens.

I used this technique extensively, and in my use cases it worked in every browser (although I remember that I have a problem with IE6 in one project).

+1
source

it’s better to use a background image for a custom form like this, this will simplify the work of the manager, and you can easily customize it for different resolutions.

0
source

More articles:


All Articles