CSS add text inside element that is triangle

Question

I have this element like so:

 <div class="box">Beautiful Wooded Lots</div>

now the box class is a triangle generated from here:

http://apps.eky.hk/css-triangle-generator/

and I got this from there:

.box { 
width: 0;
height: 0;
border-style: solid;
border-width: 300px 300px 0 0;
border-color: #25779B transparent transparent transparent;
position: absolute;
color: #FFF;
font-size: 30px;
text-transform: uppercase;
}

But the text is not going inside the triangle. What I am trying to do is get the text inside the triangle and have the text on an angle.

Here is a jSFiddle

https://jsfiddle.net/sp2od5oL/

Teshtek · Accepted Answer · 2017-01-17 21:40:58Z

1

What about this?

.box{
border-bottom: 300px solid #25779B;
border-left: 300px solid transparent;
border-right: 300px solid transparent;
float:left;
margin-left:-200px;
position:relative;
top:-50px;
-webkit-transform: rotate(-45deg);}

.box > span{
color:#fff;
font-size:1em;
font-weight:bold;
position:absolute;
right:-26px;
top:40px;}

<div class="box"><span>Beautiful Wooded Lots</span></div>

answered Jan 17, 2017 at 21:40

Teshtek

1,3921 gold badge12 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Joint · Accepted Answer · 2017-01-17 21:37:09Z

0

Place your text inside some <span> and add css:

.box span {
    position: absolute;
    top: -250px;
    left: 20px;
    transform: rotate(-45deg);
    text-align: center;
}

Your triangle div is not just a triangle, it is only border of this div, which looks like triangle so you can't place your content inside it in other way than I gave upper.

answered Jan 17, 2017 at 21:37

Joint

1,2261 gold badge12 silver badges19 bronze badges

Comments

Adrianopolis · Accepted Answer · 2017-01-17 21:39:00Z

0

Because that element is pretty much a faux triangle using borders, what you can do is add position:relative to your .box style. Then wrap your text in a span with class="positioned-text"

.box .positioned-text {
    display: block;
    position: absolute;
    top: -295px; 
    left: 5px;
}

answered Jan 17, 2017 at 21:39

Adrianopolis

1,2921 gold badge11 silver badges15 bronze badges

Comments

Marvel Moe · Accepted Answer · 2017-01-17 21:39:51Z

0

Not sure if this is exactly how you want it, but you need to position the text absolutely and give the parent element the relative property; the transform property will rotate the text.

<div class="box">
 <p>Beautiful Wooded Lots</p>
</div>

.box { 
position:relative;
width: 0;
height: 0;
border-style: solid;
border-width: 300px 300px 0 0;
border-color: #25779B transparent transparent transparent;
position: absolute;
color: #FFF;
font-size: 30px;
text-transform: uppercase;
}
p {
font-size:1em;
transform:rotate(-45deg);
position:absolute;
bottom:90px;
left:15px
}

answered Jan 17, 2017 at 21:39

Marvel Moe

9551 gold badge6 silver badges12 bronze badges

Comments

davidhawkes10 · Accepted Answer · 2017-01-17 21:54:45Z

0

Have a look at this

<div class="top">
    <p>Beautiful Wooded Lots<p>
</div>

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

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

answered Jan 17, 2017 at 21:54

davidhawkes10

12 bronze badges

Comments

BaruchAv · Accepted Answer · 2020-05-15 09:21:24Z

Here's how I did it

.panel {
  width:200px;
  position:relative;
  margin:auto;
  border:1px solid black;
}
.panel .discountTab .text {
    transform: rotate(45deg);
    z-index: 99;
    color: #fff;
    font-weight: bold;
    right: 2px;
    top: 10px;
    position: absolute;
    font-size: 18px;
}
.panel .discountTab .arrow-down {
    width: 0;
    height: 0;
    border-left: solid transparent;
    border-right: solid transparent;
    border-top: solid #f00;
    transform: rotate(225deg);
    top: -5px;
    border-width: 40px;
    right: -25px;
    position: absolute;
}

<div class="panel panel-primary">
        <div class="discountTab"><span class="text">מבצע</span><div class="arrow-down"></div></div>
        <div class="panel-body">
            <div class="title_">דאו.לגבר ספרי לוריאל יח</div>
            <div class="items_controls">
                <button class="btn btn-sm btn-xs1 btn-primary plus"><i class="fa fa-plus" aria-hidden="true"></i></button>
                <div class="num theme-color">3</div>
                <button class="btn btn-sm btn-xs1 btn-primary minus"><i class="fa fa-minus" aria-hidden="true"></i></button>
            </div>
        </div>
    </div>

Collectives™ on Stack Overflow

CSS add text inside element that is triangle

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related