如何在这个 div 的右上角添加一个三角形？答案

【问题标题】：How do I add a triangle to the top right of this div?如何在这个 div 的右上角添加一个三角形？
【发布时间】：2014-10-15 04:37:24
【问题描述】：

我正在尝试在产品 div 的右上角添加一个三角形，但似乎出了点问题。

这是我最终的结果：

三角形的角度应该如下：

页面：http://goo.gl/RdYzwC

HTML 如下所示：

<div class="grid-item large--one-quarter medium--one-third small--one-half">
  <div class="item_border product-grid-item">
    <div class="product-grid-image" style="height: 175px;">
      <div class="product-grid-image--centered product-image-relative">
        <div class="reveal">
          <div class="triangle-top-right">
            <img alt="Aarts Frambozen op siroop" src=
            "//cdn.shopify.com/s/files/1/0656/8697/products/AHI_434d50303234343731_dRevLabel_1_Rendition_LowRes_JPG_compact.jpeg?v=1413221721">

            <div class="hidden">
              <div class="caption">
                <div class="centered">
                  <span class="item-quantity">3</span>
                </div><!-- end of .centered -->
              </div><!-- end of .caption -->
            </div><!-- end of .hidden -->
          </div>
        </div>
      </div>
    </div>

    <div class="item_info">
      <form action="/cart/add" class="add-to-cart-form" enctype=
      "multipart/form-data" id="addToCartForm" method="post" name=
      "addToCartForm">
        <select class="product-variants" id="productSelect" name="id">
          <option selected="selected" value="897687403">
            Default - €2.03 EUR
          </option>
        </select> <button class="btn btn-add-to-cart" id="addToCart" name="add"
        type="submit"><span class="icon icon-add-to-cart"></span></button>
        <span class="variant-quantity" id="variantQuantity"></span>
      </form>

      <p class="item_title">Aarts Frambozen op siroop</p>

      <div class="item_price_and_size">
        <div class="product-item--price">
          <span class="item_price">€2.03</span>
        </div>

        <div class="product-item--size">
          <span class="item_size">370 ml</span>
        </div>
      </div>
    </div>
  </div>
</div>

三角形的CSS：

.triangle-top-right {
  position: relative;
  border-style: solid;
  border-width: 0 20px 20px 0;
  border-color: transparent #204a80 transparent transparent;
}

我可以尝试什么来解决这个问题？

【问题讨论】：

请创建一个 jsfiddle。您想在产品中还是产品上方添加三角形？
在产品中。由于它是一个缺少 CSS 的大型网站，因此很难为产品挑选 CSS。它应该在产品中，Top Richt 角落
@Danko 我重新打开了问题，但重复的问题应该以 duplicate 的形式关闭。我会留下那个帖子的链接：stackoverflow.com/questions/18531959/…
是的@HashemQolami 似乎是重复的......但我认为 OP 知道如何制作三角形，他问他的代码为什么不起作用。
@Danko 我怀疑它现在更像梯形而不是三角形。

标签： html css

【解决方案1】：

你制作三角形的代码很好，你需要在一些伪元素上管理三角形，试试这个：

.triangle-top-right {
    position:relative;
}
.triangle-top-right::before {
  content:" ";
  position: absolute;
  top:0;
  right:0;
  border-style: solid;
  border-width: 0 20px 20px 0;
  border-color: transparent #204a80 transparent transparent;
}

查看Demo Fiddle

【讨论】：

【解决方案2】：

试试这个

.triangle-top-right{
width: 0;
height: 0;
border-style: solid;
border-width: 0 200px 200px 0;
border-color: transparent #007bff transparent transparent;
line-height: 0px;
_border-color: #000000 #007bff #000000 #000000;
_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
}

【讨论】：