主页 / 问题 / 999454
Accepted
Sergey
Asked:2020-07-05 00:25:56 +0000 UTC2020-07-05 00:25:56 +0000 UTC

如何添加第二个伪元素::after 和:before？

  • 772

我需要为 div 添加装饰。

上面和下面我已经添加了元素。

在此处输入图像描述

这是伪元素代码[scss]：

.content {
        background-color: seashell;
        width: 20vw;
        height: 20vw;
        margin-top: 4vw;
        margin-bottom: 4vw;
        border: 0.3vw solid #53b796;
        border-radius: 1vw;
        position: relative;
        &:after{
          content: "";
          position: absolute;
          top: 20vw;
          left: 0.7vw;
          width: 0;
          height: 0;
          border-left: 9vw solid transparent;
          border-right: 9vw solid transparent;
          border-top: 3vw solid #53b796;
        }
        &:before{
          content: "";
          position: absolute;
          top: -3vw;
          left: 0.7vw;
          width: 0;
          height: 0;
          border-left: 9vw solid transparent;
          border-right: 9vw solid transparent;
          border-bottom: 3vw solid #53b796;
        }
      }

如何在左侧和右侧添加更多相同的元素？我怎样才能把这些三角形弄圆？边界半径不起作用。

加法：按原样保留，按原样保留。 在此处输入图像描述

html

3 个回答

  1. Best Answer

    body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.content {
  position: absolute;
  background-color: seashell;
  width: 200px;
  height: 200px;
  border: 0.3vw solid #53b796;
  border-radius: 1vw;
}

.outer {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 250px;
  width: 180px;
  position: relative;
  padding: 20px 50px;
  perspective: 30px;
}

.outer:after,
.outer:before {
  content: '';
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: #53b796;
  border: 2px solid #53b796;
  box-sizing: border-box;
}

.outer:before {
  right: 50%;
  transform-origin: 100% 0;
  transform: rotateY(-8deg);
  border-radius: 20% 0 0 20%;
}

.outer:after {
  left: 50%;
  transform-origin: 0 0;
  transform: rotateY(8deg);
  border-radius: 0 20% 20% 0;
}
    <div class='outer'>
  <div class='content'></div>
</div>

    • 2

  2. 尝试了所有选项。这里已经建议了。在互联网上，我找到了最懒惰和最快的方法。当然，它有它的缺点，但出于简单的目的，它可以做到。

    clip-path 属性创建一个有界区域，指定元素的可见程度。

    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);

    应用此属性的结果可以在链接 剪辑路径中看到

    • 2

  3. :before您不能为一个:after元素添加超过 1个。如果您需要更多 - 添加包装器div'ов

    更新：您可以使用矩形而不是三角形并玩弄border-radius

      <div style="border-radius: 40px 10px" class="radius">
   border-radius: 40px 10px;
  </div>
    • 1

相关问题