Question

我尝试制作此代码：

https://codepen.io/HenryGuillen17/pen/baGxYj

<div class="ribbon"></div>

但它并没有真正出来。我想制作一条带有连续边缘的缎带，但我还没有成功。在我的作品中，他们要求我制作动画，好像我正在取消幕布，但是可以做到，我们会看到。

事实是，我必须为网页制作功能区，但我找不到解决方案。

非常感谢！

Answer 1

我在功能区的末尾添加了两个最终部分，因为当倾斜元素时，很容易调整伪元素

HTML：

<div class="ribbon">
</div>
<div class="final-ribbon-part1">
<div class="final-ribbon-part2">

（S）CSS：

body {
  margin : 0 !important;
}

$left-window: 10px;
$width-ribbon : 150px;
$height-ribbon : 300px;
$top-ribbon: 0px;
$left-ribbon: 0px;
$grosor-borde: 2px;
.ribbon {
  top: $top-ribbon;
  left: $left-ribbon;
  position: absolute;
  margin-left: $left-window;
  background-color: #DDD;
  width: $width-ribbon;
  height: $height-ribbon;
  border-radius : 0 0 35px 35px;
  z-index: 1;
  //border: 1px solid black;

  background: rgba(147,186,19,1);
  background: -moz-linear-gradient(top, rgba(147,186,19,1) 0%, rgba(147,186,19,1) 50%, rgba(2,102,45,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(147,186,19,1)), color-stop(50%, rgba(147,186,19,1)), color-stop(100%, rgba(2,102,45,1)));
  background: -webkit-linear-gradient(top, rgba(147,186,19,1) 0%, rgba(147,186,19,1) 50%, rgba(2,102,45,1) 100%);
  background: -o-linear-gradient(top, rgba(147,186,19,1) 0%, rgba(147,186,19,1) 50%, rgba(2,102,45,1) 100%);
  background: -ms-linear-gradient(top, rgba(147,186,19,1) 0%, rgba(147,186,19,1) 50%, rgba(2,102,45,1) 100%);
  background: linear-gradient(to bottom, rgba(147,186,19,1) 0%, rgba(147,186,19,1) 50%, rgba(2,102,45,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#93ba13', endColorstr='#02662d', GradientType=0 );

   &:before {
    height: $height-ribbon - 20;
    border-left: $grosor-borde dashed #da5050;
    border-right: $grosor-borde dashed #da5050;
    content: '';
    position: absolute;
    width: $width-ribbon * 0.9;
    left : $left-ribbon + 6px;
  }
  &:after {
    height: $height-ribbon - 10;
    border-left: $grosor-borde dashed #631a15;
      border-right: $grosor-borde dashed #631a15;
    content: '';
    position: absolute;
    width: ($width-ribbon * 0.9) - 10;
    left : $left-ribbon + 6px + 5;
  } 
}
.final-ribbon-part1 {
  top: $top-ribbon + $height-ribbon - 40px;
  left: 11px;
  background-color: #03662c;
  width: 74px;
  height: 147px;
  position: absolute;
  border-radius: 0px 0px 0px 90%;
  z-index: -1;
  &:before {
    height: 96%;
    width: 92%;
    border-bottom: $grosor-borde dashed #da5050;
    border-left: $grosor-borde dashed #da5050;
    content: '';
    position: absolute;
    border-radius: 0 0 0 90%;
    top: 0;
    left: 3.5px;
  } 
  &:after {
    top: 0;
    height: 92%;
    width: 92%;
    border-left: $grosor-borde dashed #631a15;
      border-bottom: $grosor-borde dashed #631a15;
    content: '';
    position: absolute;
    left : 10px;
    border-radius: 0 0 0 90%;
  }
}

.final-ribbon-part2 {
  top: 0px;
  left: 74px;
  background-color: #03662c;
  width: 74px;
  height: 147px;
  position: absolute;
  border-radius: 0px 0px 0 90%;
  z-index: -1;
  transform: rotateY(180deg);
  &:before {
    height: 96%;
    width: 92%;
    border-bottom: $grosor-borde dashed #da5050;
    border-left: $grosor-borde dashed #da5050;
    content: '';
    position: absolute;
    border-radius: 0 0 0 90%;
    top: 0;
    left: 3.5px;
  } 
  &:after {
    top: 0;
    height: 92%;
    width: 86%;
    border-left: $grosor-borde dashed #631a15;
      border-bottom: $grosor-borde dashed #631a15;
    content: '';
    position: absolute;
    left : $left-ribbon + 6px  + 2;
    border-radius: 0 0 0 98%;
  } 
}

Codepen：https://codepen.io/Marouen/pen/KZKrYR?editors=1100

带圆边的丝带

1 个答案: