Question

我正在尝试在div的左上角创建一个忽略填充的三角形，并且不会推动我的文本。我已经接近了，但它坚持填充并推送文本。这是我现在所拥有的图像。

enter image description here

现在，蓝色三角形跟随我的5px填充，它将绿色框推到一边，因此它不居中。这是我的相关HTML：

<li class="featured">
        <div class="triangle"></div>
        <img src="@Url.Content("~/Content/img/brochure.jpg")" alt="brochure" />
        <div>
            <h2>Brochure</h2>
            <p>This is the text under the brochure.</p>
            View Brochure<br />
            Download PDF<br />
        </div>
    </li>

CSS：

section.mainWrap .brochures li.featured
{
    width: 42%;
    margin: 0 20px 15px;
    border: 2px solid #cccccc;
    background-color: rgba(255, 255, 255, 0.6);
    padding: 4px;
}

    section.mainWrap .brochures li.featured .triangle 
    {
        width: 0px;
        height: 0px;
        border-style: solid;
        border-width: 50px 50px 0 0;
        border-color: #007bff transparent transparent transparent;
        float: left;
        z-index: 1;
    }

section.mainWrap .brochures li.flRight
{
    float: right;
}

section.mainWrap .brochures li h2
{
    font-size: 1.2em;
    margin: 0 auto;
    text-align: center;
}

section.mainWrap .brochures li p
{
    font-size: 0.8em;
    margin: 5px 0;
    height: 30px;
    line-height: 100%;
}

section.mainWrap li.brochure
{
    width: 184px;
    margin: 0;
    padding: 2px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    height: 390px;
}

section.mainWrap li.brochure img, section.mainWrap .brochures li.featured img
{
    text-align: center;
    margin: 0px auto 0;
    display: block;
    z-index: 10;
}

Answer 1

使li相对定位，三角形绝对位于左上角。这会忽略任何填充。然后删除float。

li.featured {
    position: relative;
    /* what you had before... */
}

li.featured .triangle {
    position: absolute;
    top: 0; left: 0;
    NO FLOAT: LEFT!
    /* what you had before... */
}

绝对定位将您的三角形从常规元素流中移除，并将其固定到某个位置，无论如何。您需要定位其父相对，否则三角形将粘贴在页面的左上角。 Example。 Resource

就个人而言，我会使用pseudo-element ::before而不是div。它不会使你的标记混乱。

Answer 2

在CSS中，任何带有position: absolute的对象都将从元素的“流”中删除，并且不会推送任何其他元素。所以制作你的三角形position: absolute。像这样：

section.mainWrap .brochures li.featured .triangle 
{
    position: absolute;
}

现在，绝对定位的元素将相对于“绝对”或“相对”定位的第一个父元素放置。如果没有，您将相对于整个页面定位三角形。不是我们想要的。因此，让我们相对地定位三角形的父元素li。

li.featured {
    position: relative;
}

这对li没有任何作用，它只允许li移动，如果需要，并为三角形提供参考。

要了解有关CSS定位的扣留，请查看以下链接：

http://www.w3schools.com/css/css_positioning.asp

需要在div的左上角创建一个三角形

2 个答案: