Question

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

这是我最终的结果：

enter image description here

三角形的角度应如下：

enter image description here

这是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;
}

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

Answer 1

试试这个

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

Answer 2

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

.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

如何在此div的右上角添加三角形？

2 个答案: