Блог

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

Однако стрелка не отображается в Safari и Internet Explorer.

Любые предложения: скрипка: http://jsfiddle.net/ozzy/vHLJU/2 /

Код: css

     #container{
position:relative;
margin:10px;
    }
    .rectangle{
position:absolute;
width: 200px; 
height: 100px; 
background: #fff;
border:1px solid #aaa;
    }
   .small-rectangle{
position: absolute;
top: 25px; 
left: 200px; 
width: 100px; 
height: 50px; 
background:#fff;
border:1px solid #aaa;
border-left:2px solid #fff; 
    }
   .magicrect{
position:absolute; 
top: 0px; 
left: 200px; 
width: 99px;
height: 100px;
border-right:1px solid #aaa;
border-left:none;
    }
   .arrow-right{
position: absolute; 
top: 0px; 
left: 300px; 
width: 0; 
height: 0; 
border-top: 50px solid transparent; 
border-bottom: 50px solid transparent; 
border-left: 50px solid #fff; 
    }
 

html — это:

 <div id="container">
  <div class="rectangle"></div>
  <div class="magicrect"></div>
  <div class="small-rectangle"></div>
 <div class="arrow-right"></div>
</div>
 

Должно выглядеть примерно так …

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

Редактировать: исправлен разрыв в 1 пиксель. вам нужно изменить порядок HTML-кода и увеличить границу, сдвинув ее на -1 сверху и -1 слева.

Измените свой html на этот

 <div id="container">
<div class="rectangle"></div>
<div class="arrow-right dark"></div>
<div class="magicrect"></div>
<div class="small-rectangle"></div>
<div class="arrow-right"></div>
</div>
 

и добавьте класс css

 .dark {
top:-1px;
border-left: 52px solid #aaa;
border-top:51px solid transparent;
border-bottom:51px solid transparent;
left:299px;
 

}

при этом первая стрелка, которая находится за второй стрелкой, приобретает темный цвет, а затем выталкивает ее на 1 пиксель, чтобы она отображалась из-за второй стрелки.

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

http://jsfiddle.net/BqGyU/

В основном концепция заключается в создании двух треугольников. Похоже, что первоначальная концепция заключалась в том, чтобы иметь белый треугольник (используя рамку для его создания) на нецветном фоне. Это нормально, но если вам нужна граница вокруг этого, вы не можете использовать свойство border . Чтобы обойти это, вы можете создать под ним еще один треугольник с цветом границы. Затем этот параметр отключается, чтобы создать эффект границы.

 .arrow-right-top{
    position: absolute; 
    top: 1px; 
    left: 300px; 
    width: 0; 
    height: 0; 
    border-top: 49px solid transparent; 
    border-bottom: 49px solid transparent; 
    border-left: 49px solid #fff; 
}
.arrow-right-bottom{
    position: absolute; 
    top: 0px; 
    left: 300px; 
    width: 0; 
    height: 0; 
    border-top: 50px solid transparent; 
    border-bottom: 50px solid transparent; 
    border-left: 50px solid #aaa;
}