主页 / 问题 / 1104008
Accepted
skatch mast
Asked:2020-04-01 23:02:09 +0000 UTC2020-04-01 23:02:09 +0000 UTC

如何在纯 CSS 中做到这一点

  • 772

在此处输入图像描述

以及可以通过什么附加after

div:after {}
css

2 个回答

  1. Best Answer

    例子

    body {
  background: url(https://c.pshere.com/photos/df/4c/background_beach_blue_sky_boat_clouds_exotic_horizon_idyllic-1000891.jpg!d) no-repeat center top /cover;
}

.discount {
  display: inline-flex;
  align-items: center;
  padding: 1rem 2rem;
  color: #f00;
  font-size: 28px;
  font-weight: 700;
  border-radius: 35px 0 0 35px;
  border: 2px solid #fff;
  box-shadow: 0 5px 15px rgba(0, 0, 0, .15);
  overflow: hidden;
  box-sizing: border-box;
}

.discount::before {
  content: '';
  box-shadow: 0 0 0 2px #fff, 0 0 0 500px #FFD300;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-right: 1rem;
  box-sizing: border-box;
}
    <div class="discount">50%</div>

    • 5

  2. 一个小例子，但你不需要这样做，因为样式的适应性一般

    div {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  height: 50px;
  width: 100px;
  background-color: #f7d304;
  text-align: center;
  color: #ea2716;
  font-size: 25px;
  font-weight: bold;
  border-radius: 50px 0 0 50px;
}

div:before {
  content: '';
  display: block;
  width: 15px;
  height: 15px;
  background-color: #d7d7d7;
  border-radius: 50%;
  border: 3px solid white;
}
    <div>50%</div>

    • 1

相关问题