トライアングルコンテナ内に正しく配置する要素

Question

私は三角形の 'container' 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> 

Answer 1

例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; 
} 

あなたは三角形に何も追加できますが、内容や位置の幅を調整する必要があります。

Answer 2

あなたはposition:absoluteを使用することができますが、境界線を使用して容器の形状を形成する

垂直位置要素に

.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>