如何使用css和div制作这样的形状

Question

https://www.cp24.com/polopoly_fs/7.687199!/httpImage/image.jpg_gen/derivatives/default/image.jpg

我想要完成类似于附加图像的内容，我尝试了几个帖子但是没有完成它，请帮帮我。

由于

Answer 1

您可以使用CSS :after伪元素来实现类似的项目，例如：

#banner {
  font-family: sans-serif;
  text-transform: uppercase;
}

#banner > div {
  display: inline-block;
  height: 40px;
  line-height: 40px;
  padding: 0 20px;
}

#banner .banner-grey {
  background: #aaa;
  position: relative;
}

#banner .banner-grey:after {
  border: 20px solid transparent;
  border-left-color: #aaa;
  content: '';
  display: block;
  position: absolute;
  right: -40px;
  top: 0;
}

#banner .banner-red {
  background: red;
  font-weight: bold;
  margin-left: -4px;
  padding-left: 60px;
}

#banner .banner-red span {
  color: #fff;
  font-style: italic;
}

<div id="banner">
  <div class="banner-grey">Check out our <b>live and interactive screen</b></div>
  <div class="banner-red"><span>CP24</span>now</div>
</div>