Question

我正在尝试创建两个带有切角的横幅，但是我的代码存在问题： 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>

问题1：

我正在尝试裁剪横幅广告的左上角，但是卡片在作物停留在原处的同时四处移动。

问题2：

带有class="dot"的跨度应该形成一个彩色圆圈，但不是。

Answer 1

不确定问题1中的含义。关于问题2，您需要向display: block类中添加.dot，还可以从其中删除left属性。

Answer 2

为了使此功能正常运行，我必须对您的代码进行几处更改，因此请参阅下面的代码片段以获取所有更改。但是，这里有一些关键点：

要将::before伪元素与横幅正确定位，请在横幅上添加相对位置。
为使蓝点正常工作并正确对齐其内容，Flexbox布局是一个很好的解决方案。
为简化代码，最好将相似的项目一起设置样式。因此，我为您的横幅广告提供了共享样式。
<img>元素不应具有相应的结束标记（此类元素的技术术语为“自关闭”）。就是说，我将您的图像更改为背景图像。原因是您不能同时在横幅上overflow: hidden 和将剪裁的角放在其边界上。

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

如何正确安排？

2 个答案: