CODEWITHSUNDEEP
htmlcss
sazr
sazr

Reputation: 25928

Position elements correctly inside Triangle Container

I have a triangle 'container' div and inside can be anything (p, label, input, etc.). I have my triangle looking ok but the elements are positioned outside of the triangle.

How can I make my triangle CSS3 robust enough to handle any contents and just position them correctly?

It currently looks like the first picture, my goal is something like the 2nd picture:

enter image description here enter image description here

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>

Upvotes: 1

Views: 103

Answers (2)

guest271314
guest271314

Reputation: 1

You can use position:absolute, set top to position elements vertically

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

Upvotes: 0

Nora
Nora

Reputation: 3261

Here is an example 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;
}

You can add anything in the triangle but you will need to adjust the width of the content and positioning.

Upvotes: 1

Related Questions