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

1 Downloads
67 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

Pure CSS and HTML scripting but no js

A Pen by Bill Johnston

Amber Dragon

Odd Occurrences In Array

Complex SVG animation

Des Gecko

Test driving React.js

Moon.js test #2