Question

我最近尝试了不同形状的div，如三角形梯形等。

HTML：

<div class="triangle">HI nice to meet you guys</div>

CSS

.triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid blue;
}

以前，当div为正方形（高度和宽度为100px）时，内容会正确显示。

当我将div设置为三角形样式时，内容会溢出。

如何才能使这个比例成正比，以便在div中正确显示。

请参阅小提琴：http://jsfiddle.net/7qbGX/2/

任何建议都会很棒。

Answer 1

试试这个：LINK

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

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

Answer 2

您的身高和宽度为0.您将无法在其中插入任何文字。它会溢出或者你可以将溢出设置为“隐藏”，但是你不会看到任何因为div的大小为0。

Answer 3

您的div在您的实际div中看不见，请尝试为该div提供背景颜色。

[见演示] http://jsfiddle.net/salwenikhil0724/7qbGX/6/

.triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid blue;
    background-color:red;

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

Answer 4

这是为了正确显示文字，你需要提到如下宽度属性： -

  <div style="width: 10em; word-wrap: break-word;">
   Some longer than expected text with antidisestablishmentarianism
  </div>

对于水平滚动，你可以把overflow-x：隐藏起来，亲爱的。

内容出现在div之外

4 个答案: