在Triangle Container中正确定位元素

Question

我有一个三角形容器＆＃39; div和inside可以是任何内容（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，设置top来垂直定位元素

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;