Question

我现在搜索了很多个小时并尝试了不同的代码来实现它，但没有机会！

我想切掉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>

我只想切左下角。背景应该是透明的。

我很感激每一个想法！谢谢

Answer 1

这是在通用“DIV”宽度id“myDiv”上。试试吧

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

Answer 2

简单的方法是更具体地使用border-radius border-bottom-left-radius

<强>更新

现在我有一张所说物体的实际照片，我从可爱而有才华的Lea Verou那里找到了ARTICLE。她的技术涉及background: linear-gradient，它在预定长度变得透明。

＆＃13;

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

＆＃13;

<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>

＆＃13;

从div切下左下角

2 个答案: