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

Question

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

现在，蓝三角是继我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