时间戳

首页 > 解决方案 > bootstrap 4 css 在卡片右下角显示包含文本的黄色三角形，是 css 的方式吗？

css - bootstrap 4 css 在卡片右下角显示包含文本的黄色三角形，是 css 的方式吗？

问题描述

我正在努力编辑 CSS 以在 Bootstrap 4 卡的右下角显示包含文本的黄色三角形，在 CSS 中，有没有办法实现这种效果？

这是 CSS 当前在 Bootstrap 4 卡中输出的内容：

在此处输入图像描述

这就是我想要实现的目标：

在此处输入图像描述

.row {
  position: relative;
  min-height: 100px;
}

.triangle {
  display: block;
  width: 50px;
  height: 50px;
  font-size: 21px;
}

.triangle::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to left top, #ffffff 49%, transparent 33%);
}

{
  position: relative;
  top: 5px;
  left: 5px;
}
<div class="card card-ecommerce">
  <a href="#" class="triangle btn-warning position-absolute">
               &nbsp;<i class="fas fa-arrow-left" aria-hidden="true"></i></a>
  <div class="view overlay">
    <img src="https://i.stack.imgur.com/B73k3.jpg" class="img-fluid" alt="sample image">
    <a>
      <div class="mask rgba-white-slight"></div>
    </a>
  </div>
  <div class="card-body">
    <h5 class="card-title mb-1"><strong><a class="dark-grey-text">10% cashback</a> </strong></h5>
    <span class="badge badge-danger mb-2">bestseller</span>
    <div class="card-footer pb-0">
      <div class="row mb-0">

标签： cssbootstrap-4

解决方案

试试这个代码

我在对角线上创建了两个三角形，里面有文字。希望它会帮助你。

.change_corner {
  width: 0;
  float: right;
  height: 0;
  border-top: 150px solid #ffcc00;
  border-right: 150px solid transparent;
  transform: rotate(180deg);
}

.change_corner span {
  position: absolute;
  top: -130px;
  width: 100px;
  left: 5px;
  text-align: center;
  font-size: 16px;
  font-family: arial;
  transform: rotate(131deg);
  display: block;
}

.corner {
  width: 0;
  height: 0;
  border-top: 150px solid #ffcc00;
  border-bottom: 0px solid transparent;
  border-right: 150px solid transparent;
}

.corner span {
  position: absolute;
  top: 35px;
  width: 100px;
  left: 5px;
  text-align: center;
  font-size: 16px;
  font-family: arial;
  transform: rotate(-45deg);
  display: block;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Traingle Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>

<body>
  <div class='container'>
    <div class="row">
      <div class="col-md-12">
        <div class="card mt-5">
          <div class="triangle">
            <div class="corner"><span>20% Special Offer</span></div>
          </div>
          <div class="mt-2 mb-2">
            This is my content
          </div>
          <div class="triangle">
            <div class="change_corner"><span>20% Special Offer</span></div>
          </div>
        </div>
      </div>
    </div>
  </div>

</body>

</html>

推荐阅读