时间戳

首页 > 解决方案 > How to add colors on the corner of card CSS?

html - How to add colors on the corner of card CSS?

问题描述

I have an example basic bootstrap card like below

Example 1: Example 1

I want to draw blue and green color side by side but I only could draw blue like below

Example 2: Example 2

When I try to give both classes at the same time it doesnt work.The one is always getting overwritten.

 <div class="card blue green">
    <div class="card-body">Basic card</div>
  </div>

How to add them side by side?Seems like :before doesnt help.

Expected Expected

Snippet is available below

.green:before{border-left: 5px solid #73BD07;}
.blue:before{border-left: 5px solid #4D33DC;}
.card:before{content: '';position: absolute;top: 0;left: 0;height: 100%;}
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Card</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.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>

<body> 
 
<div class="container">
  <h2>Basic Card</h2>
  <div class="card blue green">
    <div class="card-body">Basic card</div>
  </div>
</div>

</body>
</html>

标签： htmlcsstwitter-bootstrapbootstrap-4

解决方案

问题是你的green:before被覆盖了，card:before因为这些类在同一个div元素上。您可以通过使用来避免这种情况.green:after。

.green:after{
 content: '';
 border-left: 5px solid #73BD07;
 position: absolute;
 left: 5px;
 top: 0;
 height: 100%;
}
.blue:before{border-left: 5px solid #4D33DC;}
.card:before{content: '';position: absolute;top: 0;left: 0;height: 100%;}
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Card</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.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>

<body> 
 
<div class="container">
  <h2>Basic Card</h2>
  <div class="card blue green">
    <div class="card-body">Basic card</div>
  </div>
</div>

</body>
</html>

推荐阅读