如何製作使用css邊界響應的形狀？

我試圖通過使用CSS來創建一個形狀邊界如何製作使用css邊界響應的形狀？

<div class="shape> 
</div>

下面是上面的代碼中CSS：

.shape{ 
width: 0; 
height: 0; 
border-left: 50px solid transparent; 
border-right: 50px solid transparent; 
border-bottom: 100px solid red; 
}

我想作這種形狀響應。可能嗎？感謝提前:)

來源

2016-12-05 Harish

在寬度和高度上使用％。 – Troyer

將％添加到寬度。 – 2016-12-05 09:40:09

@Troyer 0％的寬度仍然爲0，並且邊框不能位於％ – Justinas

使用視窗單位： http://www.w3schools.com/cssref/css_units.asp

.shape{ 
 
width: 0; 
 
height: 0; 
 
border-left: 5vw solid transparent; 
 
border-right: 5vw solid transparent; 
 
border-bottom: 10vw solid red; 
 
}

<div class="shape"></div>

來源

2016-12-05 09:40:35

謝謝，我會試試看。 – Harish

它的工作！ :) :) – Harish

使用CSS單位vh和vw可以定義相對（百分數）的視口的高度和寬度的長度。

border-width: 10vw;

使用CSS的百分比，可以定義相對於具有position: absolute或position: fixed最近的祖先元素的長度。

border-width: 10%;

使用CSS媒體查詢，您可以根據視口大小定義以不同方式呈現內容的步驟。

.shape { 
    border-width: 100px; 
} 

@media (max-width: 600px) { 
    .shape { 
     border-width: 50px; 
    } 
}

這些都是基本的CSS技巧。您可以在MDN閱讀這些例如：

來源

2016-12-05 09:45:46

它的工作！非常感謝你的明確解釋和參考:) – Harish

-1

您可以使用引導爲同一。使用Bootstrap對任何事物做出響應都很容易，或者可以將邊距設置爲自動。

來源

2016-12-05 09:58:21

<HTML> 
<head> 
<style> 
.shape{ 
width: 0; 
height: 0; 
border-left: 5vw solid transparent; 
border-right: 5vw solid transparent; 
border-bottom: 10vw solid red; 
} 
</style> 
</head> 
<div class="shape">ABC 
</div> 
</HTML>

來源

2016-12-05 10:07:30

儘管這段代碼可以解決這個問題，[包括解釋]（// meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers）真的有助於提高你的文章的質量。請記住，您將來會爲讀者回答問題，而這些人可能不知道您的代碼建議的原因。也請儘量不要用解釋性註釋來擠佔代碼，這會降低代碼和解釋的可讀性！ – kayess

如何製作使用css邊界響應的形狀？

回答

相關問題