丸い縁とリボン

Question

私はこのコードを作ってみる：

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

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

をそれは本当に出てきません。私はそれらの連続的なエッジを持っているリボンを作ってみたいが、私は成功していない。私の仕事では、あたかも私がカーテンを離しているかのようにアニメーションを作ってもらうことを要求しますが、それはできます。

真実は私がウェブページ用のリボンを作る必要があり、解決策を見つけることができなかったことです。

ありがとうございました！

Answer 1

要素を傾斜させるときに、それのための擬似要素を

HTML調整することが容易になるので、私はリボンの端に2つの最終部を添加：

<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私は使用しなくても、これが可能になるとは思わない