0

I searched for many hours now and tried different codes to achieve it, but no chance!

I would like to cut off the left bottom corner of a div. 

.vc_gitem-zone {
  position: relative;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-clip: padding-box;
  box-sizing: border-box;
  overflow: hidden;
}
.vc_gitem_row {
  background-color: rgba(173, 21, 21, 0.40);
  padding-top: 20px;
}
<div class="vc_gitem-zone vc_gitem-zone-c">
  <div class="vc_gitem-zone-mini">
    <div class="vc_gitem_row vc_row vc_gitem-row-position-top">
      <div class="vc_col-sm-12 vc_gitem-col vc_gitem-col-align-left">
        <div class="vc_custom_heading vc_gitem-post-data vc_gitem-post-data-source-post_title">
          <h4 style="text-align: center"><a href="http://info.promotiontube.com/gti/tickets/" class="vc_gitem-link" title="Tickets">Tickets</a></h4>
        </div>
      </div>
    </div>
  </div>
</div>

I want only the left bottom corner be cut. The background should be transparent.

I am thankful for every idea! Thank you

m4n0
  • 29,823
  • 27
  • 76
  • 89
Ali Elkhaiat
  • 57
  • 1
  • 9
  • are you try with **border-bottom-left-radius** ? http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_border-bottom-left-radius – Matej Đaković Nov 17 '15 at 11:17
  • It should look like this: http://666kb.com/i/d3vzg3bwh0q07ppki.jpg – Ali Elkhaiat Nov 17 '15 at 12:04
  • The comments keep getting removed automatically due to dupe closure. For the image you have provided above, you'd need to look at the *Slanted side* thread that is given in the dupe notice. – Harry Nov 17 '15 at 12:06

2 Answers2

0

This is on a generic "DIV" width id "myDiv". Try it

#myDiv {
    width: 100px;
    height: 100px;
    background-color: red;
    position:relative;
}
#myDiv::after {
    width: 1px;
    height: 1px;
    content: '\00a0';
    position: absolute;
    background-color: transparent;
    border-top: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid white;
    border-left: 10px solid white;
    bottom: 0px;
    left: 0px;
}
RiccardoC
  • 876
  • 5
  • 10
  • That's what I am looking for. But the problem is: I would like to have it transparent (I have a body background image and this should be vissible, if the corner is cut). Do you have any idea, how I could achieve that? – Ali Elkhaiat Nov 17 '15 at 11:54
0

The easy way is to use border-radius more specifically border-bottom-left-radius

UPDATE

Now I have an actual pic of said object, I found this ARTICLE from the lovely and talented Lea Verou. Her technique involves background: linear-gradient that becomes transparent at a predetermined length.

   body {
  margin: 0;
  padding: 0;
  border: 0;
}
.vc_gitem-zone {
  position: relative;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  background-clip: padding-box;
  box-sizing: border-box;
  overflow: hidden;
}
.vc_gitem_row {
  background-color: rgba(173, 21, 21, 0.80);
  padding-top: 20px;
}
div.corner {
  background: #c00;
  /* fallback */
  background: linear-gradient(0deg, transparent 0, #c00 0) top left, linear-gradient(0deg, transparent 0px, #c00 0) top right, linear-gradient(45deg, transparent 10px, #c00 0) bottom left, linear-gradient(0deg, transparent 0px, #c00 0)bottom right;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}
<div class="vc_gitem-zone vc_gitem-zone-c corner">
  <div class="vc_gitem-zone-mini corner">
    <div class="vc_gitem_row vc_row vc_gitem-row-position-top corner">
      <div class="vc_col-sm-12 vc_gitem-col vc_gitem-col-align-left corner">
 
        <div class="vc_custom_heading vc_gitem-post-data vc_gitem-post-data-source-post_title corner">
          <h4 style="text-align: center"><a href="http://info.promotiontube.com/gti/tickets/" class="vc_gitem-link" title="Tickets">Tickets</a></h4>
        </div>
      </div>
    </div>
  </div>
</div>
zer00ne
  • 41,936
  • 6
  • 41
  • 68