1

I have to center text on top of (or inside of) a triangle, which is bleeding off the right side. Ideally I'd like it to be responsive, but all I could get to work was fixed pixel widths/margins on both the triangle and the content. Like so:

View my Demo 

.triangle-down:after {
  content: "";
  border-style: solid;
  position: absolute;
  right: 0;
  top: 0;
  margin-left: -450px;
  border-width: 550px 450px 0 450px;
  border-color: red transparent transparent transparent;
}

You can see what I'm trying to accomplish better if you look at it wider than 960px. (It will just be a red rectangle below 768px.) I suppose I can work with this if there's no other choice because I can make sure the text inside the triangle will always be roughly the same word count.

But is there a better way to accomplish this layout in a responsive design without having to use fixed pixels?

LBF
  • 1,133
  • 2
  • 14
  • 39

1 Answers1

0

Use this,

Html code :

 <div class="up">
        <p>some information text goes here<p>
    </div>

Css code :

.up {
    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);
}

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

Working Demo is here :

http://jsfiddle.net/markus85/TRuQc/

  • Thanks. But it doesn't do it much differently than what I have. It doesn't expand to fit the text, so I'd still have to used fixed widths. See it with more text: http://jsfiddle.net/TRuQc/1414/ – LBF Jan 20 '16 at 04:08