Content appears outside the div

Question

I recently tried out a div with a different shape, like a trapezoid of a triangle, etc.

HTML:

<div class="triangle">HI nice to meet you guys</div>

CSS

.triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid blue;
}

Previously, content was displayed correctly when the div is a square (height and width 100 pixels).

When I create a div so that it looks like a triangle, then the contents materialize.

How can I make it proportional so that it displays correctly inside the div.

See the script: http://jsfiddle.net/7qbGX/2/

Any suggestion would be great.

Answer 1

try the following: LINK

.triangle{
    width: 0px;
    height: 0px;
    border-style: inset;
    border-width: 0 100px 173.2px 100px;
    border-color: transparent transparent #007bff transparent;
    float: left;
    transform:rotate(360deg);
    -ms-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -webkit-transform:rotate(360deg);
    -o-transform:rotate(360deg);
}

.triangle p {
    text-align: center;
    top: 80px;
    left: -47px;
    position: relative;
    width: 93px;
    height: 93px;
    margin: 0px;
}

Answer 2

0. - . , "", , div 0.

Answer 3

your div is invisible to see in your actual div an attempt to give a background color to this div.

[cm. demo] http://jsfiddle.net/salwenikhil0724/7qbGX/6/

.triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid blue;
    background-color:red;

}
.triangle p {
    text-align: center;
    top: 40px;
    left: -47px;
    position: relative;
    width: 93px;
    height: 93px;
    margin: 0px;
}  

Answer 4

This is correctly displayed text, you need to specify the width property as follows: -

  <div style="width: 10em; word-wrap: break-word;">
   Some longer than expected text with antidisestablishmentarianism
  </div>

for horizontal scrolling you can put overflow-x: hide it up to you.