Question

我有这样的元素：

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

现在，box类是从这里生成的三角形：

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

我从那里得到了这个：

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

但是文字并没有进入三角形。我想要做的是获取三角形内的文本并使文本成一个角度。

这是一个jSFiddle

https://jsfiddle.net/sp2od5oL/

Answer 1

这个怎么样？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

将您的文字放在一些<span>内并添加css：

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

你的三角形div不仅仅是一个三角形，它只是这个div的边框，看起来像三角形，所以你不能用你给鞋帮上面的其他方式把你的内容放在里面。

Answer 3

因为该元素几乎是使用边框的虚拟三角形，所以您可以做的是添加位置：相对于.box样式。然后使用class="positioned-text"

将文本换行

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

Answer 4

不确定这是否完全符合您的要求，但您需要绝对定位文本并为父元素提供相对属性; transform属性将旋转文本。

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

Answer 5

看看这个

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

Answer 6

这是我的做法

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

CSS在三角形元素中添加文本

6 个答案: