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

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

i'm trying add together triangle top right of product div seems going wrong.

here's end with:

the angle of triangle should follows:

page: http://goo.gl/rdyzwc

here's 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 triangle:

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

what seek solve this?

your code create triangle fine, need here manage triangle on pseudo-element, seek 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 demo fiddle

html css