How to arrange correctly? - html

Question

I'm trying to create two banners with cropped corners, but I'm having problems with my code:
https://codepen.io/Jeerjmin/pen/VdBVKL
.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
background-color: white;
}
.banner-1 {
min-width: 200px;
max-width: 200px;
height: 300px;
margin: 70px;
background-color: white;
border: solid #01579B 4px;
border-radius: 15px;
overflow: hidden;
}
.banner-1:before {
position: absolute;
content: '';
min-width: 38px;
height: 60px;
top: 39px;
left: 303px;
background-color: white;
border-bottom: solid #01579B 4px;
transform: rotate(-45deg);
}
.banner-2 {
min-width: 200px;
max-width: 200px;
height: 300px;
margin: 70px;
background-color: white;
border: solid #01579B 4px;
border-radius: 15px;
overflow: hidden;
}
.banner-2:before {
position: absolute;
content: '';
min-width: 38px;
height: 60px;
top: 39px;
left: 652px;
background-color: white;
border-bottom: solid #01579B 4px;
transform: rotate(-45deg);
}
img {
position: relative;
top:100px;
left: 25px;
width: 200px;
height: 150px;
}
.dot {
height: 50px;
width: 50px;
background-color: deepskyblue;
border-radius: 50%;
position: relative;
left: -50px;
bottom: 100px;
text-align:center;
}
p {
text-align:center;
}
<div class="container">
<div class="banner-1">
<p>Card-1</p>
<img src="https://img2.goodfon.ru/original/1366x768/6/5e/koshka-kot-meyn-kun-belyy-fon-5567.jpg"></img>
<span class="dot dot-1">
<h1>0,5</h1>
<h5>кг</h5>
</span>
</div>
<div class="banner-2">
<p>Card-2</p>
<img src="https://img2.goodfon.ru/original/1366x768/6/5e/koshka-kot-meyn-kun-belyy-fon-5567.jpg"></img>
<span class="dot dot-2">
<h1>0,5</h1>
<h5>кг</h5>
</span>
</div>
</div>
Problem 1:
I'm trying to crop the top left corners of the banners, but the cards move around while the crops stay where they are.
Problem 2:
The span with class="dot" should form a colored circle, but does not.

Answer 1

Not sure what you meant in Problem 1. As for problem 2, you need to add display: block to your .dot class and you also can remove left property form it.

Answer 2

I had to make several changes to your code to get this working, so see the code snippet below for all the changes. However, here are a few key points:
To position your ::before pseudo-elements in correct relation to the banners, add relative positioning to the banners.
To make your blue dot work, and to align its contents correctly, Flexbox layout is a good solution.
To simplify your code, it's preferable to style similar items together. For that reason, I've given your banners shared styles.
<img> elements should not have a corresponding closing tag (the technical term for this kind of element is "self-closing"). That said, I changed your image to be a background image. The reason is that you can't both have overflow: hidden on your banners and put the clipped corner over its borders.
.container {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
background-color: white;
}
/* Target both banners together,
since they share styles */
.banner-1,
.banner-2 {
min-width: 200px;
max-width: 200px;
height: 300px;
margin: 70px;
border: 4px solid #01579B;
border-radius: 15px;
/* Relatively position the banner,
so that the clipped corners,
can be properly placed */
position: relative;
/* To have the image clip to
the banner, make it a
background image */
background: white no-repeat 10px bottom / auto 150px
url("https://img2.goodfon.ru/original/1366x768/6/5e/koshka-kot-meyn-kun-belyy-fon-5567.jpg");
}
.banner-1::before,
.banner-2::before {
content: "";
width: 22px;
height: 38px;
position: absolute;
left: 0;
top: -1px;
background-color: white;
border-right: 4px solid #01579B;
/* Adjust your transform origin,
to make the rotation easier */
transform-origin: top right;
transform: rotate(45deg);
}
.dot {
/* Use Flexbox to align the
content in your dot */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 80px;
width: 80px;
background-color: deepskyblue;
border-radius: 50%;
position: absolute;
left: 20px;
bottom: 100px;
}
h1, h5 {
/* Remove margins on
dot content */
margin: 0;
}
p {
text-align: center;
}
<div class="container">
<div class="banner-1">
<p>Card-1</p>
<span class="dot dot-1">
<h1>0,5</h1>
<h5>кг</h5>
</span>
</div>
<div class="banner-2">
<p>Card-2</p>
<span class="dot dot-2">
<h1>0,5</h1>
<h5>кг</h5>
</span>
</div>
</div>