CODEWITHSUNDEEP
htmlcss
narzero
narzero

Reputation: 2299

How do I add a triangle to the top right of this div?

I'm trying to add a triangle to the top right of a product div but something seems to be going wrong.

Here's what I end up with:

enter image description here

The angle of the triangle should be as follows:

enter image description here

Page: http://goo.gl/RdYzwC

Here's what the HTML looks like:

<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 for triangle:

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

What could I try to solve this?

Upvotes: 2

Views: 2410

Answers (2)

DaniP
DaniP

Reputation: 38252

Your code to make a triangle is fine, what you need here is manage the triangle on some pseudo-element, try this:

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

Check the Demo Fiddle

Upvotes: 3

Harutyun Abgaryan
Harutyun Abgaryan

Reputation: 2023

Try this 

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

Upvotes: 3

Related Questions