在三角形容器內正確定位元素

我有一個三角形「容器」div，裏面可以是任何東西（p,label,input等）。我的三角形看起來不錯，但元素位於三角形之外。在三角形容器內正確定位元素

我該如何讓我的三角形CSS3足夠健壯以處理任何內容，並將其正確定位？

目前，它看起來像第一張圖片，我的目標是一樣的東西二號圖片：

的jsfiddle：https://jsfiddle.net/hkunofLk/

.arrow-down { 
    width: 0; 
    height: 0; 
    border-left: solid transparent; 
    border-right: solid transparent; 

    border-top: solid #f00; 

    overflow: visible; 
} 

.arrow-md { 
    border-width: 200px; 
} 

input { 
    width: 200px; 
    height: 75px; 
} 

<div class="arrow-md arrow-down"> 
    <label for="usr">Name:</label> 
    <input type="text" class="form-control input-lg" id="usr"> 
</div>

來源

2016-12-31 Jake M

形成用邊框的容器的形狀是一個壞主意。你必須設置三角形div的寬度和高度，以便它可以包含任何東西 – jst16

下面是一個例子的jsfiddle：https://jsfiddle.net/hkunofLk/3/

HTML：

<div class="arrow-md arrow-down"> 
    <label for="usr">Name:</label> 
    <input type="text" class="form-control input-lg" id="usr"> 
</div>

的CSS：

.arrow-down { 
    position: relative; 
    overflow: visible; 
    width: 400px; 
    min-height: 200px; 
} 

.arrow-down:before { 
    position: absolute; 
    z-index: 1; 
    top: 0; 
    left: 0; 
    display: block; 
    width: 0; 
    height: 0; 
    border-left: solid transparent; 
    border-right: solid transparent; 
    border-top: solid #f00; 
    content: ''; 
} 

.arrow-md.arrow-down:before { 
    border-width: 200px; 
} 

label, 
input { 
    position: relative; 
    z-index: 2; 
    display: block; 
    max-width: 60%; 
    margin: 0 auto; 
} 

input { 
    width: 200px; 
    height: 75px; 
}

您可以在三角形添加任何東西，但你將需要調整的內容和定位的寬度。

來源

2016-12-31 00:22:44 Nora

您可以使用position:absolute，設置top定位元素垂直

.arrow-down { 
 
    width: 0; 
 
    height: 0; 
 
    border-left: solid transparent; 
 
    border-right: solid transparent; 
 
    border-top: solid #f00; 
 
    overflow: visible; 
 
} 
 
.arrow-md { 
 
    border-width: 200px; 
 
} 
 
.arrow-down * { 
 
    max-width: 200px; 
 
    max-height: 75px; 
 
    left: 100px; 
 
    position: absolute; 
 
    display: block; 
 
} 
 
.arrow-down input { 
 
    top: 50px; 
 
} 
 
.arrow-down label { 
 
    top: 25px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="arrow-md arrow-down"> 
 
    <label for="usr">Name:</label> 
 
    <input type="text" class="form-control input-lg" id="usr"> 
 
</div>

來源

2016-12-31 00:35:41 guest271314

在三角形容器內正確定位元素

回答

相關問題