How can I render country flags as a ribbon, using CSS only?


Tags: html,css,css3,css-shapes

Problem :

I need to present some data. Each block of data needs a country flag. I would like to display the country flag, using a nice little hanging banner, like this:

enter image description here

This image is edited in paint, and the example I've used, comes from this page

This link right here, shows how to display flags of Europe++ in pure CSS. In my system, I only need Nordic flags, which are all represented by a cross.

From the codepen example:

@function cross($back, $main, $detail: $back){
  @return linear-gradient(90deg, transparent 28%, $main 28%, $main 34%, transparent 34%),
    linear-gradient(transparent 42%, $detail 42%, $detail 46%, $main 46%, $main 58%, $detail 58%, $detail 62%, transparent 62%),
    linear-gradient(90deg, $back 25%, $detail 25%, $detail 28%, $main 28%, $main 34%, $detail 34%, $detail 37%, $back 37%);
}

If I derive this (and rotate it 90deg to fit my preferred orientation, I can get something like this:

HTML:

<div class="norway"></div>

CSS:

.norway{
background: linear-gradient(180deg, transparent 28%, blue 28%, blue 34%, transparent 34%),
    linear-gradient(90deg, transparent 42%, white 42%, white 46%, blue 46%, 
    blue 58%, white 58%, white 62%, transparent 62%),
    linear-gradient(180deg, red 25%, white 25%, white 28%, blue 28%, blue 34%, 
    white 34%, white 37%, red 37%);
 height: 600px;
 width: 400px;
}

The hanging banner example however, is not really displaying the element itself, merely its border. I like the split in the bottom, So I would like to be able to set the linear gradients on the different border sides individually, or somehow otherwise solve the problem. I have tried a few approaches, but I can't seem to make the gradients work on individual border sides.

Does anyone know how I can display my flags as split end ribbons, using only CSS?

By the way, the Czech Republic is easy...

UPDATE: I was able to render a Norwegian version, but I had to make two elements. One displaying the flag in the background of an element, and another element over it, displaying only the bottom border, in the same color as the block background. It seems like a pretty fragile solution, though... https://jsfiddle.net/azjctc1y/



Solution :

You have a great base to go on. It just needs a few tweaks here and there. (Making individual styles for flags is going to be a colossal pain though). There's just a few places you could improve it. In most cases when using absolute positioning, you may want to have whatever you are positioning align with some edge of the parent element. For that you can use negative values like left: -1em or whatever, but a lot of times, it's more robust to leave left auto and set the right attribute to 100%. You also set the bottom border to right:0. In throwing it in this answer I discovered that the font size difference caused it to be aligned incorrectly. One way you can fix that is to give it a left:50% with a negative margin equal to the left border. In this case it's 1.5em. A few changes, but it's all about understanding and leveraging top, right, bottom, and left to their fullest potential, which includes percent based values.

Hope it helps!

body {
  padding: 2em;
}

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
  margin: 10px;
}

.test-container{
  background-color: lightgrey;
  border: 1px solid black;
  position: relative;
  padding: 10px;
  margin: 10px;
  min-height: 100px;
}

.ribbon {
  position: absolute;
  top: 0;
  right: 1em;
  z-index: 1;
  color: #eee;
  font-size: 2em;
}

.norway {
  position: absolute;
  top: -0.5em;
  right: 1em;
  z-index: 1;
  font-size: 2em;
  height: 70px;
  width: 42px;
  background: linear-gradient(180deg, transparent 28%, blue 28%, blue 34%, transparent 34%),
    linear-gradient(90deg, transparent 40%, white 40%, white 46%, blue 46%, blue 54%, white 54%, white 60%, transparent 60%),
    linear-gradient(180deg, red 25%, white 25%, white 28%, blue 28%, blue 34%, white 34%, white 37%, red 37%);
}

.ribbon:before {
  content: "";
  font-size: 0.5em;
  position: absolute;
  border-style: solid;
  border-color: transparent transparent #B71C1C transparent;
  top: 0;
  right: 100%;
  border-width: 0 0 1em 0.7em;
  z-index: -1;
}
.ribbon:after {
  content: "";
  font-size: 0.5em;
  position: absolute;
  height: 5em;
  border: 1.5em solid #F44336;
  z-index: -1;
  bottom: 0;
  border-top-width: 1.5em;
  border-bottom-color: lightgrey;
  border-right-color: transparent;
  border-left-color: transparent;
  border-top-color: transparent;

  left: 50%;
  margin-left: -1.5em;
  -webkit-transition: height 0.5s;
  transition: height 0.5s; 

}
<div class="container">   
  <div class="row">
      <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <div class="test-container">
          <a class="norway ribbon"></a>
          Norway
        </div> 
      </div>
    </div>
</div>


    CSS Howto..

    How to draw X Sign with SVG+CSS?

    What do i need and how do I start to adjust the css of a website with “encrypted” .gz files

    How to create arrows (with 3 lines) in CSS?

    How to bottom-align these divs?

    How to hide repeated content from search engines with CSS?

    How to create change image option on mousehover like in gmail account?

    How to get 2 CSS files to work together? - Problem with !important overriding rules

    How to select the parent's parent in CSS?

    how do you change the color of nav bar

    How to display drop down menu with an arrow in the top using css?

    How to create a table using multiple span in one div using CSS

    How to alter hover effects for image button and embedded text?

    How to parameterize CSS selectors? [duplicate]

    CSS Flexbox : How to construct a specific layout

    How to stop jquery loop function by a click while starting another loop function

    How to make a border in css that is actually on the very edges

    how to replace a link name text

    JQuery Animate() showing sticky behaviour with other elements in the same class

    how to open a menu with a button?in html

    How can I center my

    when there is an next to it?

    How do I align my navbar so it's permanently in the middle of my white box (without padding etc)?

    how to trim css code to just one line [closed]

    How to display a binary search tree using CSS, HTML and a bit of Javascript?

    SharePoint 2007 popup rich text editor displays corporate logo from master page - how can I remove this?

    How can I enable/disable(in real time) javascript plugins on a webpage?

    How to make sticky navigation change colour when scrolling past a certain div?

    How to adapt height of an element to another in CSS

    How to Set the Left and Top CSS Positioning of a DIV Element Dynamically Using JavaScript

    How to have a color change animation on a button outline?

    How to make width of a dynamic table not increase?