Question

我正在尝试制作一个三角形div。好吧，实际上我已经使用边界技巧创建了div。我遇到的问题是在三角形的中间有一条透明线。它就像一条垂直线，将直角分成两个相等的三角形。我已经尝试了一切使透明线不透明div，但它不起作用。这是我的代码。在此先感谢帮助我修复此错误。 CSS

.shopitemz .col-md-3 .card .brand {
  width: 0;
  height: 0;
  border-left: 70px solid transparent;
  border-right: 70px solid transparent;
  transform: rotate(45deg);
  border-bottom: 70px solid;
  position: absolute;
  right: -12%;
  top: -3%;
}

.brand.r {
  border-color: transparent transparent #CC0000 transparent !important;
}

和HTML，

<div class="row shopitemz">
  <div class="col-md-3">
    <div class="card">
      <div class="brand"></div>
      <div class="branded">Giovencci</div>
      <img src="Images/product_images/product2.png"
        style="width:90%;height:auto;text-align:center;margin:3% 5%" />
      <hr />
      <div class="text-center">
        <p>Natasha Bedonna Eye shadow Pallette</p>
      </div>
      <div class="text-center">
        <p style="color:black">&#8358;2500</p>
      </div>
    </div>
  </div>
</div>

Answer 1

添加

transform-style: preserve-3d;

.shopitemz .col-md-3 .card .brand {
  width: 0;
  height: 0;
  border-left: 70px solid transparent;
  border-right: 70px solid transparent;
  transform: rotate(45deg);
  border-bottom: 70px solid;
  position: absolute;
  right: -12%;
  top: -3%;
  transform-style: preserve-3d;
}
.brand.r {
  border-color: transparent transparent #CC0000 transparent !important;
}

<div class="row shopitemz">
  <div class="col-md-3">
    <div class="card">
      <div class="brand"></div>
      <div class="branded">Giovencci</div>
      <img src="Images/product_images/product2.png" style="width:90%;height:auto;text-align:center;margin:3% 5%" />
      <hr />
      <div class="text-center">
        <p>Natasha Bedonna Eye shadow Pallette</p>
      </div>
      <div class="text-center">
        <p style="color:black">&#8358;2500</p>
      </div>
    </div>
  </div>
</div>

将div显示为三角形

1 个答案: