Item: Ribbon HTML/CSS
Rating: 3.4
Author: 10Dimensional

1 Downloads
53 Views
Tweet
Download Now View Demo

HTML
CSS

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Ribbon HTML/CSS</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

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

</body>

</html>


/*Downloaded from https://www.codeseek.co/10Dimensional/ribbon-htmlcss-MeJvjy */
body {
  padding: 20px;
}

.ribbon {
  position: relative;
}
.ribbon:before, .ribbon:after {
  content: "";
  width: 0;
  position: absolute;
  display: block;
  border-right: 20px solid #1eb2df;
  border-left: 20px solid #1eb2df;
  border-top: 50px solid #1eb2df;
  border-bottom: 10px solid #1eb2df;
  border-bottom-color: transparent;
  z-index: 0;
}
.ribbon:after {
  top: 2px;
  border-color: #ccc;
  border-bottom-color: transparent;
  z-index: -1;
}

Comments

More from 10Dimensional

Ribbon HTML/CSS

In this example below you will see how to do a Ribbon HTML/CSS with some HTML / CSS and Javascript

Comments

More from 10Dimensional

Ribbon HTML/CSS

RT - Calendar Day

Dynamic Carousel

Floating Animated Hearts

You Might Also Like

My first pen

A Pen by CJ Williams

A Pen by Anton Koning

ice-watch/Apogee email holiday 2016

Icon animation

Fiddling around (with click to expand)

TAIMED

Eloquent Javascript Chapter Two Exercise 1.0