Question

我必须将文本置于三角形的顶部（或内部），该三角形从右侧流出。理想情况下，我希望它具有响应性，但我可以开始工作的是三角形和内容上的固定像素宽度/边距。像这样：

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

如果你看看它比960px更宽，你可以看到我想要更好地完成的事情。（它只是一个低于768px的红色矩形。）我想如果没有其他选择我可以使用它，因为我可以确保三角形内的文本总是大致相同的字数。

但有没有更好的方法在响应式设计中完成此布局而无需使用固定像素？

Answer 1

使用此，

Html代码：

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

Css代码：

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

工作演示在这里：

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

在响应三角形上居中文本？

1 个答案: