在三角形容器内正确定位元素

我有一个三角形“容器”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

在三角形容器内正确定位元素

回答

相关问题