CODEWITHSUNDEEP
htmlcss
user979331
user979331

Reputation: 11851

CSS add text inside element that is triangle

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/

Upvotes: 0

Views: 2458

Answers (6)

BaruchAv
BaruchAv

Reputation: 1

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>

Upvotes: 0

davidhawkes10
davidhawkes10

Reputation: 1

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;
}

Upvotes: 0

Teshtek
Teshtek

Reputation: 1352

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>

Upvotes: 1

Marvel Moe
Marvel Moe

Reputation: 935

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
}

Upvotes: 0

Adrianopolis
Adrianopolis

Reputation: 1292

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;
}

Upvotes: 0

Joint
Joint

Reputation: 1218

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.

Upvotes: 0

Related Questions