создания CSS треугольник в процентах

Question

Я пытаюсь создать DIV, который квадрат на верхней площадке и впадает в треугольник,

квадратная часть не так уж трудно, и работает отлично, но треугольник часть немного сложнее. Коробка должна меняться от размера с размером экрана, на квадрате я сделал это, используя% в ширине и высоте, но я не могу использовать знак% в свойстве границы.

Код, который я имею в этот момент

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 используется для установки класса: я сделал это, потому что я использую parralax Li brary и хотел установить кнопку на «активный» на определенной высоте

я надеюсь, что кто-то может помочь мне (и, возможно, другие) с этой проблемой

jsfiddle example Моя идея заключается в том, что, когда DIV установлен на класс menuItemActive, он будет иметь стрелку, еще не Это только тогда, когда он установлен на активный

Answer 1

Я нашел решение, используя JavaScript вместо проценте, Fiddle Я надеюсь, что это может помочь некоторым другим людям, а

Сценарий Java я использовал это:

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

Answer 2

его лучше использовать фоновое изображение для пользовательской формы, как этот это сделает его легче менеджер и вы можете заставить его легко настраиваться для разных разрешений

Answer 3

Это использует два перекрывающих друг друга divs для создания треугольника и this method, чтобы сделать вещи текучими, сохраняя соотношение сторон.

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; 
} 

Я оставил его без фона, чтобы вы могли увидеть, как это работает.

Answer 4

Вы можете делать треугольники в CSS.

Вот ссылка на статью, в которой изложена общая техника: http://css-tricks.com/snippets/css/css-triangle/. Существует также множество аналогичных/других подходов для немного разных ситуаций, которые я нашел и использовал, просто выполните поиск «css треугольников».

Чтобы кратко описать технику: он использует четыре границы для элемента (если вы хотите стрелку вниз, вы должны поместить этот элемент в свой <div id="overV12"> или в зависимости от эффекта применить его к вашему внутреннему <div>). Некоторые из них прозрачны, некоторые - нет. Изменяя ширины и цвета границ, вы можете создавать треугольники CSS, которые могут быть полностью настроены для формирования разных углов градуса, длины и т. Д. Я также видел эту концепцию, используемую для создания речевых пузырей только для CSS, а также для ручек всплывающих подсказок.

Я использовал эту технику широко, и в моих случаях использования она работала в каждом браузере (хотя я помню, что у меня проблема с IE6 в одном проекте).