帶邊框的飛人

我使用CSS創建了一個空中飛人。帶邊框的飛人

HTML：

<div class="trapezeG"></div>

CSS：

.trapezeG { 
    position: absolute; 
    left: 214px; 
    top: 120px; 
    width: 1px; 
    height: 70px; 
    border: 1px solid #069; 
    border-color: transparent transparent transparent #000000; 
    border-width: 32px; 
    transform: rotate(180deg); 
}

這裏是我的小提琴：https://jsfiddle.net/sfck34y3/

下面是實際的結果是：

CSS trapeze with border

我想改變頂點和底點的高度，使它看起來比現在更接近矩形。我應該如何修改邊框寬度？

來源

2015-04-17 wawanopoulos

只是出於好奇，任何轉變元素的理由？ https://jsfiddle.net/hashem/sfck34y3/1/爲什麼不給右邊框的寬度/顏色？ –

不完全是你的方法，但你也可以使用像這個答案透視變換 - http://stackoverflow.com/questions/15724678/creating-an-isoceles-trapezoid-shape/25833643#25833643 – Harry

您可以使用border-left-width來保持飛人的寬度並減少與border-width屬性的頂部/底部邊界。您需要border-width物業否則將被重寫後設置border-left-width屬性：由

.trapezeG { 
 
    position: absolute; 
 
    left: 214px; 
 
    top: 120px; 
 
    width: 1px; 
 
    height: 70px; 
 
    border: 1px solid #069; 
 
    border-color: transparent transparent transparent #000000; 
 
    border-width: 10px; 
 
    border-left-width: 32px; 
 
    transform: rotate(180deg); 
 
}

<div class="trapezeG"> 
 
</div>

由於commented @Hashem Qolami變換屬性是沒有必要得到這個方向。
你只需要刪除的改造和利用，而不是左邊一個右邊界，使飛人形狀：

.trapezeG { 
 
    position: absolute; 
 
    left: 214px; 
 
    top: 120px; 
 
    width: 1px; 
 
    height: 70px; 
 
    border: 1px solid #069; 
 
    border-color: transparent #000000 transparent transparent; 
 
    border-width: 10px; 
 
    border-right-width: 32px; 
 
}

<div class="trapezeG"> 
 
</div>

來源

2015-04-17 11:09:34

謝謝，但我想保持飛人的原始寬度尺寸。我想只是減小角度 – wawanopoulos

是的！這是我搜索！ – wawanopoulos

你的形狀的左側由的height定義div。右側是由height +頂部/底部邊界定義的。

因此，只需更改左側高度，您需要增加高度並減小頂部/底部邊框寬度，以使整體高度不發生變化。

.trapezeG { 
 
     position: absolute; 
 
     left: 214px; 
 
     top: 120px; 
 
     width: 1px; 
 
     height: 100px; 
 
     border: 1px solid #069; 
 
     border-color: transparent transparent transparent #000000; 
 
     border-width: 17px 32px; 
 
     transform: rotate(180deg); 
 
    }

<div class="trapezeG"> 
 
</div>

這裏是兩個尺寸之間轉換的演示，展示效果：https://jsfiddle.net/sfck34y3/5/（懸停在形狀）

來源

2015-04-17 11:19:41

帶邊框的飛人

回答

相關問題