更好的方法在適當的位置放置幾個形狀

Question

我試圖通過使用CSS來製作水晶條。 Here is a JS Bin

3種形狀，將根據不同的分辨率顯示的錯位。我遇到過很多次將形狀放在正確的地方。有沒有更好的方法來操縱形狀的地方？我的第二種方法（another JS Bin）使一個div來組合形狀。但是，這也不太好。 （不能居中形狀或旋轉）

Answer 1

這是你想到的？

http://jsfiddle.net/j5gk9srn/

<div class="bar"></div> 

body { 
    background: #111; 
} 

.bar { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    margin: auto; 
    width: 10px; 
    height: 200px; 
    background-color: #aef; 
    -webkit-transform: rotate(45deg); 
     -ms-transform: rotate(45deg); 
      transform: rotate(45deg); 
} 
.bar:before, .bar:after { 
    position: absolute; 
    left: 0; 
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 
    content: ''; 
} 
.bar:before { 
    top: -10px; 
    border-bottom: 10px solid #aef; 
} 
.bar:after { 
    bottom: -10px; 
    border-top: 10px solid #aef; 
}