cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              .container
  .main
    .clipper
    .tri-top
    .tri-mid
    .tri-bottom
    .rect
  .main
    .clipper
    .tri-top
    .tri-mid
    .tri-bottom
    .rect
    .shadow
            
          
!
            
              $body: #3a3a3a
$main: #f50d40
$main-2: #cc253c

body
  background: $body
  
  .container
    position: relative
    height: 350px
    width: 350px
    margin: auto
    margin-top: 100px
    perspective: 400px
    
    .main
      position: absolute
      height: 350px
      width: 175px
      background: $main
      //clip-path: polygon(175px 0px, 0px 70px, 25px 275px, 175px 350px)
      overflow: hidden
      
      
      .tri-top, .tri-mid, .tri-bottom
        position: absolute
        box-sizing: border-box
        background: $body
        z-index: 10
        
      .tri-top
        height: 70px
        border-left: 175px solid $body
        border-bottom: 70px solid $main
        
      .tri-mid
        top: 70px
        width: 25px
        border-left: 25px solid $body
        border-top: 205px solid $main
        
      .tri-bottom
        top: 275px
        left: 25px
        width: 150px
        border-left: 150px solid $body
        border-top: 75px solid $main
        z-index: 10
        
      .rect
        position: absolute
        bottom: 0
        height: 75px
        width: 25px
        background: $body
      
      .clipper
        position: absolute
        left: 0
        right: 0
        margin: auto
        height: 25px
        width: 60px
        bottom: 58px
        background: $main
        z-index: 30
      
      &::after, &::before
        content: ""
        position: absolute
        width: 35px
        background: #fff
        z-index: 20
      
      &::before
        right: -35px
        top: 45px
        height: 270px
        transform: rotate(25deg)
        transform-origin: 100% 0%
      
      &::after
        height: 60px
        right: 0px
        top: 220px
        background: #fff
        transform: rotate(90deg)
        transform-origin: 100% 0%
      
      &:nth-child(1)
        left: 0px
        transform: rotateY(0deg)
        transform-origin: right 50%
        animation: rotate-1 2s ease
        animation-delay: 0s
      
      &:nth-child(2)
        right: 175px
        transform: rotateY(91deg)
        animation: rotate-2 2s ease forwards
        animation-delay: 0.7s
        transform-origin: right 50%
        background: $main-2
      
        .tri-top
          border-bottom-color: $main-2
        .tri-mid
          border-top-color: $main-2
          
        .tri-bottom
          border-top-color: $main-2
          
        .clipper
          background: $main-2
        
        
      
  @keyframes rotate-1
    0%
      transform: rotateY(89deg)
  
    100%
      transform: rotateY(0deg)
  
  @keyframes rotate-2
    0%
      transform: rotateY(91deg)
  
    100%
      transform: rotateY(180deg)
            
          
!
999px
Loading ..................

Console